Postcode lookup in Next.js — keep the key on the server

How do I create the server route handler?

In the App Router, add a handler that proxies to AutoPostcode using a server-only env var:

// app/api/lookup/route.ts
export async function GET(req: Request) {
  const postcode = new URL(req.url).searchParams.get("postcode") ?? "";
  const res = await fetch(
    "https://api.autopostcode.com/v1/lookup?postcode=" + encodeURIComponent(postcode),
    { headers: { Authorization: "Bearer " + process.env.AUTOPOSTCODE_KEY } }
  );
  return Response.json(await res.json());
}

How do I call it from a client component?

The client only ever talks to your own endpoint, so the key stays secret:

"use client";
import { useState } from "react";

export function PostcodeLookup() {
  const [pc, setPc] = useState("");
  const [addresses, setAddresses] = useState([]);
  const find = async () => {
    const r = await fetch("/api/lookup?postcode=" + encodeURIComponent(pc));
    const { addresses } = await r.json();
    setAddresses(addresses);
  };
  return (
    <div>
      <input value={pc} onChange={(e) => setPc(e.target.value)} />
      <button onClick={find}>Find address</button>
      <ul>{addresses.map((a) => <li key={a.uprn}>{a.line1}, {a.town}, {a.postcode}</li>)}</ul>
    </div>
  );
}

Server handler vs direct client call

Prefer a pure Node example? See the Node.js postcode lookup API guide, add search-as-you-type with the React address autocomplete guide, and read the endpoint reference in the postcode lookup API docs.

A modern, UK-first alternative

AutoPostcode uses the same Royal Mail PAF data as Loqate, Fetchify and Ideal Postcodes, with a REST API that drops straight into Next.js.