World Clock Template
- Next.js
- TypeScript
Live clocks for the cities you work with: local time, timezone and how far ahead or behind you they are.
A Next.js world clock. Add any city and it gets a ticking analog clock, the local time, its timezone and the difference from your own time, with dark cards for cities where it’s night. Your list is saved in the browser. Use it as a team dashboard for a distributed company, or lift the API route to show local times anywhere in your own app.
What it does
- Ticking analog clocks
- Each city gets a drawn clock face and a digital time that update every second, with no extra API calls.
- Day and night at a glance
- Cards turn dark between 7pm and 6am local time, so you can see who is likely awake.
- Hours from you
- Shows how far ahead or behind each city is, including half-hour zones, and whether it’s already tomorrow there.
- Picks the right London
- When a name matches several places, the app asks which one, and remembers the choice.
- Keeps your key private
- The page only calls your own API route, which caches each city for an hour and limits each visitor to 10 lookups a minute.
How it works
The API route: it checks the city, calls World Time and returns every match.
export async function GET(request: Request) {
const city = str(new URL(request.url).searchParams.get('city'), 80);
if (!city) return fail('Enter a city');
const key = `time:${city.toLowerCase()}`;
const hit = fromCache(key, TTL_MS);
if (hit) return Response.json(hit);
const blocked = guard(request);
if (blocked) return blocked;
return respond(async () => {
const data = await callApi<{ foundCities: City[] }>('worldtime', { query: { city } });
if (!data.foundCities?.length) throw Object.assign(new Error(`No city called “${city}” found`), { status: 404 });
// Several places can share a name (London, Ontario and London, England), so return them all.
const matches = data.foundCities.map((c) => ({
city: c.city,
country: c.country,
region: c.province,
timezone: c.timezone,
utcOffset: c.utc_offset,
abbreviation: c.dst_name || null
}));
toCache(key, { matches });
return { matches };
});
}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 World Time 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": {
"search": "San Francisco",
"foundCities": [
{
"city": "San Francisco",
"city_ascii": "San Francisco",
"country": "Argentina",
"iso2": "AR",
"iso3": "ARG",
"province": "Córdoba",
"timezone": "America/Argentina/Cordoba",
"time": "17:51",
"time24": "17:51:13",
"time12": "05:51:13 PM",
"date": "2026-10-26",
"day": "Monday",
"month": "October",
"year": "2026",
"unix": "1793047873",
"dst": false,
"dst_start": null,
"dst_end": null,
"dst_name": "-03",
"utc_offset": "-03:00",
"datetime": "2026-10-26T17:51:13-03:00",
"utc_datetime": "2026-10-26T20:51:13Z",
"day_of_year": 299,
"week_number": 44
},
{
"city": "San Francisco",
"city_ascii": "San Francisco",
"country": "United States of America",
"iso2": "US",
"iso3": "USA",
"province": "California",
"state_ansi": "CA",
"timezone": "America/Los_Angeles",
"time": "13:51",
"time24": "13:51:13",
"time12": "01:51:13 PM",
"date": "2026-10-26",
"day": "Monday",
"month": "October",
"year": "2026",
"unix": "1793047873",
"dst": true,
"dst_start": "2026-03-08 03:00:00",
"dst_end": "2026-11-01 01:00:00",
"dst_name": "PDT",
"utc_offset": "-07:00",
"datetime": "2026-10-26T13:51:13-07:00",
"utc_datetime": "2026-10-26T20:51:13Z",
"day_of_year": 299,
"week_number": 44
}
]
}
}