Dynamic Routes · Next.js

Ch 2 · Routes Are Folders — card 3 of 5.

You will not write a page per order. You write one page that reads which order was asked for.

export default async function OrderPage({ params }) {
  const { id } = await params;
  return (
    <main>
      <h1>Order {id}</h1>
    </main>
  );
}

The square brackets are literal folder-name characters. Whatever the URL puts in that position arrives in params.

Why await? params is a Promise from Next 15 onwards, so the component has to be async and you have to await it. Older tutorials and a lot of Stack Overflow answers still write params.id directly — that was Next 14 and it no longer works. The same rule applies to searchParams, cookies() and headers(): they all return Promises now.