Earthquake Tracker Template
- Next.js
- TypeScript
A live feed of earthquakes around the world: 24-hour totals, a world plot and every quake with its magnitude and depth.
A Next.js earthquake tracker. It shows how many earthquakes struck in the last 24 hours and the largest, plots recent quakes by where they hit so the tectonic plate edges appear on their own, and lists each one with its magnitude, depth, time and a link to the full report. It refreshes every two minutes. Use it as a live dashboard, a newsroom tool, or lift the API route to add quake alerts to your own app.

What it does
- Live totals
- Quakes in the last 24 hours and the last hour, and the largest magnitude, refreshed every two minutes.
- The plates draw themselves
- A plain SVG plot of every recent quake by longitude and latitude, sized and coloured by magnitude. No map library.
- Filter by magnitude
- Switch between M1+, M2.5+ and M4.5+ to see everything or only the quakes people feel.
- Every quake in detail
- Place, magnitude, depth, how long ago and a tsunami flag, with a link to the full report.
- Keeps your key private
- The page only calls your own API route, which caches the feed for two minutes and limits each visitor to 10 lookups a minute.
How it works
The API route: it checks the magnitude, then calls Worldwide Earthquakes.
export async function GET(request: Request) {
const min = new URL(request.url).searchParams.get('min') || '2.5';
if (!MAGNITUDES.includes(min)) return fail(`Minimum magnitude must be one of ${MAGNITUDES.join(', ')}`);
const key = `quakes:${min}`;
const hit = fromCache(key, TTL_MS);
if (hit) return Response.json(hit);
const blocked = guard(request);
if (blocked) return blocked;
return respond(async () => {
// period=day is a paid option; on a free key the API returns the past hour, and says so in `period`.
const data = await callApi('earthquake', { query: { minMagnitude: min, period: 'day' } });
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 Worldwide Earthquakes 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": {
"earthquakes_LastUpdated": "2026-10-26T20:35:55.000Z",
"earthquakes_LastHour": 7,
"count24h": 200,
"largestMagnitude24h": 5.5,
"avgMagnitude24h": 1.74,
"count7d": 1889,
"count30d": 9917,
"avgDailyCount30d": 335.3,
"m45Count30d": 735,
"largestMagnitude7d": 7,
"largestMagnitude30d": 7.7,
"largestPlace30d": "12 km WSW of Pitaloza Arriba, Panama",
"largestTime30d": 1791568566036,
"daysStored": 30,
"period": "day",
"count": 2,
"earthquakes": [
{
"mag": 1.63,
"place": "2 km NW of Sylmar, CA",
"time": 1792978838050,
"felt": null,
"cdi": null,
"mmi": null,
"alert": null,
"status": "reviewed",
"tsunami": 0,
"sig": 41,
"net": "ci",
"types": ",focal-mechanism,nearby-cities,origin,phase-data,scitech-link,",
"nst": 56,
"dmin": 0.04284,
"rms": 0.27,
"gap": 34,
"magType": "ml",
"type": "earthquake",
"title": "M 1.6 - 2 km NW of Sylmar, CA",
"coordinates": [
-118.464666666667,
34.3231666666667
],
"depthKm": 4.21,
"id": "ci41352567",
"url": "https://earthquake.usgs.gov/earthquakes/eventpage/ci41352567",
"distanceKm": 37
},
{
"mag": 1.28,
"place": "1 km WNW of Anaheim, CA",
"time": 1792989969550,
"felt": null,
"cdi": null,
"mmi": null,
"alert": null,
"status": "automatic",
"tsunami": 0,
"sig": 25,
"net": "ci",
"types": ",nearby-cities,origin,phase-data,",
"nst": 59,
"dmin": 0.03761,
"rms": 0.24,
"gap": 55,
"magType": "ml",
"type": "earthquake",
"title": "M 1.3 - 1 km WNW of Anaheim, CA",
"coordinates": [
-117.9,
33.839
],
"depthKm": 8.14,
"id": "ci41352687",
"url": "https://earthquake.usgs.gov/earthquakes/eventpage/ci41352687",
"distanceKm": 39
}
],
"daily": [
{
"date": "2026-09-28",
"count": 395,
"maxMagnitude": 5.4,
"m45Count": 34
},
{
"date": "2026-09-29",
"count": 366,
"maxMagnitude": 5.6,
"m45Count": 24
},
{
"date": "2026-09-30",
"count": 372,
"maxMagnitude": 5.6,
"m45Count": 24
},
{
"date": "2026-10-01",
"count": 415,
"maxMagnitude": 5.3,
"m45Count": 22
},
{
"date": "2026-10-02",
"count": 357,
"maxMagnitude": 5.7,
"m45Count": 35
},
{
"date": "2026-10-03",
"count": 332,
"maxMagnitude": 5.7,
"m45Count": 18
},
{
"date": "2026-10-04",
"count": 332,
"maxMagnitude": 5.1,
"m45Count": 18
},
{
"date": "2026-10-05",
"count": 323,
"maxMagnitude": 5.3,
"m45Count": 17
},
{
"date": "2026-10-06",
"count": 367,
"maxMagnitude": 5.8,
"m45Count": 18
},
{
"date": "2026-10-07",
"count": 428,
"maxMagnitude": 5.2,
"m45Count": 23
},
{
"date": "2026-10-08",
"count": 312,
"maxMagnitude": 6.3,
"m45Count": 20
},
{
"date": "2026-10-09",
"count": 390,
"maxMagnitude": 7.7,
"m45Count": 63
},
{
"date": "2026-10-10",
"count": 334,
"maxMagnitude": 6,
"m45Count": 38
},
{
"date": "2026-10-11",
"count": 325,
"maxMagnitude": 6.2,
"m45Count": 28
},
{
"date": "2026-10-12",
"count": 381,
"maxMagnitude": 6.1,
"m45Count": 30
},
{
"date": "2026-10-13",
"count": 331,
"maxMagnitude": 6.8,
"m45Count": 23
},
{
"date": "2026-10-14",
"count": 260,
"maxMagnitude": 5.9,
"m45Count": 12
},
{
"date": "2026-10-15",
"count": 303,
"maxMagnitude": 5.6,
"m45Count": 14
},
{
"date": "2026-10-16",
"count": 340,
"maxMagnitude": 6.9,
"m45Count": 18
},
{
"date": "2026-10-17",
"count": 300,
"maxMagnitude": 5.7,
"m45Count": 12
},
{
"date": "2026-10-18",
"count": 421,
"maxMagnitude": 5.2,
"m45Count": 12
},
{
"date": "2026-10-19",
"count": 354,
"maxMagnitude": 6,
"m45Count": 29
},
{
"date": "2026-10-20",
"count": 290,
"maxMagnitude": 6.3,
"m45Count": 24
},
{
"date": "2026-10-21",
"count": 315,
"maxMagnitude": 5.3,
"m45Count": 19
},
{
"date": "2026-10-22",
"count": 372,
"maxMagnitude": 7,
"m45Count": 25
},
{
"date": "2026-10-23",
"count": 302,
"maxMagnitude": 5.7,
"m45Count": 24
},
{
"date": "2026-10-24",
"count": 255,
"maxMagnitude": 6.9,
"m45Count": 49
},
{
"date": "2026-10-25",
"count": 234,
"maxMagnitude": 6.5,
"m45Count": 26
},
{
"date": "2026-10-26",
"count": 217,
"maxMagnitude": 5.5,
"m45Count": 19
},
{
"date": "2026-10-27",
"count": 194,
"maxMagnitude": 5.8,
"m45Count": 17
}
]
}
}