javascript 43 lines · 7 steps

A cached exchange-rate proxy in Next.js

A Route Handler that proxies an upstream currency API while caching and revalidating responses at the edge.

Explained by highlit

Next.js Intermediate route-handler caching revalidation api-proxy http-headers

1import { NextResponse } from 'next/server'
2 
3const UPSTREAM = 'https://api.exchangerate.host/latest'
4 
5export async function GET(request) {
const { searchParams } = new URL(request.url)
const base = (searchParams.get('base') || 'USD').toUpperCase()
const symbols = searchParams.get('symbols')?.toUpperCase()
9 
const upstreamUrl = new URL(UPSTREAM)
upstreamUrl.searchParams.set('base', base)
if (symbols) upstreamUrl.searchParams.set('symbols', symbols)
13 
const res = await fetch(upstreamUrl, {
  headers: { accept: 'application/json' },
  next: {
    revalidate: 3600,
    tags: ['rates', `rates:${base}`],
  },
})
21 
if (!res.ok) {
  return NextResponse.json(
    { error: 'Failed to fetch exchange rates' },
    { status: 502 },
  )
}
28 
const data = await res.json()
30 
return NextResponse.json(
  {
    base: data.base,
    date: data.date,
    rates: data.rates,
  },
  {
    headers: {
      'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=86400',
    },
  },
)
43}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Route Handlers can proxy a third-party API so clients never touch it directly, letting you sanitize inputs and reshape responses.
2Next.js extends fetch with a next option so caching and tag-based revalidation happen at the data layer, not just via headers.
3Pairing s-maxage with stale-while-revalidate serves cached data instantly while refreshing it in the background.

Related explainers

javascript

const logger = require('./logger');
 
class AppError extends Error {
  constructor(message, statusCode = 500, details = null) {

Centralized error handling in Express

error-handling middleware custom-errors

Intermediate 8 steps

javascript

const formatters = new Map();
 
function getFormatter(locale, currency) {
  const key = `${locale}:${currency}`;

Caching Intl.NumberFormat for currency formatting

memoization internationalization caching

Intermediate 8 steps

javascript

class DOMBatcher {
  constructor() {
    this.reads = [];
    this.writes = [];

Batching DOM reads and writes to avoid layout thrash

batching requestanimationframe layout-thrashing

Intermediate 8 steps

package web
 
import (
	"embed"

Serving embedded static assets in Go

embed static-assets http-handler

Intermediate 8 steps

javascript

function createCountdownTimer(durationSeconds, { onTick, onComplete } = {}) {
  let remaining = durationSeconds;
  let intervalId = null;

Building a countdown timer with closures

closures factory-function timers

Intermediate 9 steps

javascript

export function buildPaginationUrl(baseUrl, { page, perPage, filters = {}, sort } = {}) {
  const url = new URL(baseUrl);
  const params = url.searchParams;