Quote of the Day Template
- Next.js
- TypeScript
A daily quote set large on its own gradient, more quotes on demand, and a collection of favorites.
A Next.js quote-of-the-day app. Everyone who opens it on a given day sees the same quote, fetched once and served from the cache, with the author and a gradient picked from its words. Ask for another at any time, copy it, or save it to a collection on the device. Use it as a start page, or lift the route to add a daily quote to a newsletter, dashboard or app.
What it does
- One quote a day
- Today’s quote is fetched once and cached until the date changes, so a busy page costs one call a day.
- More on demand
- Another quote fetches a fresh random one, never cached, within the per-visitor rate limit.
- Its own look
- Each quote gets a gradient chosen from its text, so the same quote always looks the same.
- Save and copy
- Keep favorites in a collection stored in the browser, and copy any quote with its author.
- Keeps your key private
- The browser only calls your own API route, which holds the key and limits each visitor to 10 fresh quotes a minute.
How it works
The API route: it serves today’s quote from the cache, or calls Random Quote for a fresh one.
/** GET /api/quote: today's quote. GET /api/quote?fresh=1: a new random one. */
export async function GET(request: Request) {
const fresh = new URL(request.url).searchParams.get('fresh') === '1';
const today = new Date().toISOString().slice(0, 10);
const key = `quote:${today}`;
if (!fresh) {
const hit = fromCache<Quote & { date: string }>(key, DAY_MS);
if (hit) return Response.json(hit);
}
const blocked = guard(request);
if (blocked) return blocked;
return respond(async () => {
const data = await callApi<Quote>('randomquote');
if (fresh) return { ...data, date: null };
const daily = { ...data, date: today };
toCache(key, daily);
return daily;
});
}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 Random Quote 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": {
"quote": "Your sacred space is where you can find yourself again and again.",
"author": "Joseph Campbell"
}
}