Route fourre-tout
Un fichier à src/app/examples/catch/[...slug]/page.tsx correspond à tout chemin sous /examples/catch/. Les segments capturés arrivent dans props.params.slug — typés comme une chaîne unique avec des séparateurs /.
Astuce
Les routes fourre-tout sont idéales pour les systèmes de fichiers virtuels, les blogs basés sur des slugs ou les proxies de docs. Combinez-les avec generateStaticParams pour pré-rendre les chemins connus tout en laissant les chemins inconnus passer par le loader.
Essayez
// src/app/examples/catch/[...slug]/page.tsx
// [...slug] matches any depth under /examples/catch/.
// props.params.slug arrives as a string with "/" separators,
// or as string[] depending on the bext version — split defensively.
interface PageProps {
params: { slug: string | string[] };
data?: { locale: Locale };
}
export default function Page(props: PageProps): any {
const raw = props.params.slug;
const segments = Array.isArray(raw)
? raw
: String(raw).split("/").filter(Boolean);
return (
<ol>
{segments.map((s) => <li>{s}</li>)}
</ol>
);
}