Dynamic routes
A file at src/app/examples/items/[id]/page.tsx matches /examples/items/<anything> and threads id into the page's params. Each link below renders the same page with a different param.
Tip
To pre-generate a fixed set of routes at build time, export generateStaticParams from the dynamic page — bext renders each variant statically and serves it without running the loader at request time.
Try it
- /examples/items/cherry
- /examples/items/banana
- /examples/items/kiwi
- /examples/items/mango
- /examples/items/missing-fruit — the loader throws a 404 Response.
// src/app/examples/items/[id]/page.tsx
// The [id] folder name becomes a typed param.
interface LoaderArgs {
request: Request;
params: Record<string, string>;
}
export async function loader({ request, params }: LoaderArgs) {
const item = KNOWN[params.id];
if (!item) {
throw new Response(`No item named "${params.id}".`, {
status: 404,
headers: { "content-type": "text/plain" },
});
}
return { id: params.id, ...item };
}
interface PageProps {
params: { id: string };
data?: { id: string; color: string; flavor: string };
}
export default function Page(props: PageProps): any {
const { id, color, flavor } = props.data!;
return <p>{id} — {flavor} ({color})</p>;
}