Golden Hour Template
- Next.js
- TypeScript
Golden hour, blue hour, sunrise and sunset for any place and day, in that place’s own time.
A Next.js golden hour planner. Pick a place, or use your location, choose a day and see the morning and evening golden hours, both blue hours, sunrise, sunset, solar noon and day length, with the whole day drawn as a band of light. Use it to plan a photo shoot, a wedding or a sunset dinner, or lift the API route to add sun times to a travel or outdoor app.
What it does
- Golden and blue hours
- Morning and evening golden hours and blue hours, shown as time ranges you can plan around.
- The day as a band of light
- Night, twilight, blue hour, golden hour and daylight drawn from midnight to midnight, with solar noon marked.
- Local time anywhere
- Times are shown in the place’s own timezone, not yours, so a plan for Kyoto reads in Kyoto time.
- Polar days and nights
- Handles places where the sun never sets, never rises or stays low all day, and says so.
- Keeps your key private
- The page only calls your own API route, which caches each place and day for 24 hours and limits each visitor to 10 lookups a minute.
How it works
The API route: it checks the place and date, then calls Sunrise Sunset with the timezone included.
export async function GET(request: Request) {
const params = new URL(request.url).searchParams;
const lat = Number(params.get('lat'));
const lon = Number(params.get('lon'));
const date = str(params.get('date'), 10);
if (!Number.isFinite(lat) || !Number.isFinite(lon) || Math.abs(lat) > 90 || Math.abs(lon) > 180) {
return fail('Pick a place on the map, or use your location');
}
if (!/^\d{4}-\d{2}-\d{2}$/.test(date)) return fail('Pick a date');
// Round to ~1 km so nearby visitors share the cache.
const la = lat.toFixed(2);
const lo = lon.toFixed(2);
const key = `sun:${la}:${lo}:${date}`;
const hit = fromCache(key, TTL_MS);
if (hit) return Response.json(hit);
const blocked = guard(request);
if (blocked) return blocked;
return respond(async () => {
const [y, m, d] = date.split('-');
// The API takes MM-DD-YYYY. local=true adds the place's timezone, which the page uses to show local times.
const data = await callApi('sunrisesunset', { query: { lat: la, lon: lo, date: `${m}-${d}-${y}`, local: 'true' } });
toCache(key, data);
return data;
});
}Deploy it
- Get a free API key
The free plan includes 200 credits a month, no card needed. Create your key.
- Deploy it
Click Deploy to Vercel. Vercel copies the repo to your GitHub account and asks for
APIVERVE_API_KEY: paste your key there. - Open your app
Vercel builds it and gives you a live URL, usually in about a minute. Every push to the repo redeploys it.
Try the Sunrise Sunset API — the call this template makes
No key required to try it. Get a key to use it in your app.
{
"status": "ok",
"error": null,
"data": {
"solarNoon": "2026-01-16T12:28:27.256Z",
"sunrise": "2026-01-16T07:30:14.174Z",
"sunset": "2026-01-16T17:26:40.338Z",
"sunriseEnd": "2026-01-16T07:33:11.786Z",
"sunsetStart": "2026-01-16T17:23:42.726Z",
"dawn": "2026-01-16T07:02:03.459Z",
"dusk": "2026-01-16T17:54:51.053Z",
"nauticalDawn": "2026-01-16T06:30:17.010Z",
"nauticalDusk": "2026-01-16T18:26:37.502Z",
"nightEnd": "2026-01-16T05:59:14.883Z",
"night": "2026-01-16T18:57:39.629Z",
"goldenHourEnd": "2026-01-16T08:09:09.341Z",
"goldenHour": "2026-01-16T16:47:45.171Z",
"timezone": "Europe/Madrid",
"localTimes": {
"solarNoon": "2026-01-16T13:28:27+01:00",
"sunrise": "2026-01-16T08:30:14+01:00",
"sunset": "2026-01-16T18:26:40+01:00",
"sunriseEnd": "2026-01-16T08:33:11+01:00",
"sunsetStart": "2026-01-16T18:23:42+01:00",
"dawn": "2026-01-16T08:02:03+01:00",
"dusk": "2026-01-16T18:54:51+01:00",
"nauticalDawn": "2026-01-16T07:30:17+01:00",
"nauticalDusk": "2026-01-16T19:26:37+01:00",
"nightEnd": "2026-01-16T06:59:14+01:00",
"night": "2026-01-16T19:57:39+01:00",
"goldenHourEnd": "2026-01-16T09:09:09+01:00",
"goldenHour": "2026-01-16T17:47:45+01:00"
}
}
}