Air Quality Template
- Next.js
- TypeScript
The air quality in any city or US ZIP code: an AQI score, pollutant levels and what it means for going outside.
A Next.js air quality app. Search a city or a US ZIP code and get an AQI score on a colour-coded gauge, a plain-language note on whether it’s safe to go outside, and each pollutant compared with the WHO guideline. Recent places are saved in the browser. Use it as a health or outdoor-activity widget, or lift the API route to add air quality to a weather or travel app.
What it does
- AQI gauge on any plan
- Uses the official AQI when your plan has it, and otherwise works it out from PM2.5 with the US EPA breakpoints.
- Pollutants against WHO limits
- Each pollutant gets a bar with the WHO guideline marked, red when it’s over and green when it’s under.
- Cities and ZIP codes
- Type a city name anywhere in the world, or a five-digit US ZIP code.
- What it means for you
- A health note with every reading, and the six AQI levels from Good to Hazardous.
- Keeps your key private
- The page only calls your own API route, which caches readings for 15 minutes and limits each visitor to 10 lookups a minute.
How it works
The API route: it tells a ZIP code from a city name, then calls Air Quality.
export async function GET(request: Request) {
const params = new URL(request.url).searchParams;
const input = str(params.get('city') || params.get('zip'), 80);
if (!input) return fail('Enter a city or US ZIP code');
// Five digits is a US ZIP code; anything else is a city name.
const query: Record<string, string> = /^\d{5}$/.test(input) ? { zip: input } : { city: input };
query.aqi = 'true'; // paid plans also get the official AQI and category
const key = `air:${input.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('airquality', { query });
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 Air Quality 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": {
"pm2_5": 16.75,
"pm10": 18.85,
"carbonMonoxide": 387.85,
"ozone": 9,
"nitrogenDioxide": 38.55,
"sulfurdioxide": 5.95,
"usEpaIndex": 2,
"gbDefraIndex": 2,
"aqi": 65,
"aqiCategory": "Moderate",
"dominantPollutant": "pm2_5",
"pollutantAqi": {
"pm2_5": 65,
"pm10": 17,
"ozone": 4,
"carbonMonoxide": 3,
"sulfurdioxide": 3,
"nitrogenDioxide": 19
},
"recommendation": "The air quality in San Francisco is moderate. It is generally safe to go outside, but unusually sensitive individuals may experience health effects.",
"city": "San Francisco"
}
}