Routes dynamiques
Un fichier à src/app/examples/items/[id]/page.tsx correspond à /examples/items/<anything> et injecte id dans les params de la page. Chaque lien ci-dessous affiche la même page avec un paramètre différent.
Astuce
Pour pré-générer un ensemble de routes au moment du build, exportez generateStaticParams depuis la page dynamique — bext rend chaque variante statiquement et la sert sans loader au moment de la requête.
Essayez
- /examples/items/cherry
- /examples/items/banana
- /examples/items/kiwi
- /examples/items/mango
- /examples/items/missing-fruit — le loader lève une réponse 404.
// 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>;
}