Catch-all route
A file at src/app/examples/catch/[...slug]/page.tsx matches any path under /examples/catch/. The matched segments arrive as props.params.slug — typed as a single string with / separators.
Tip
Catch-all routes are ideal for virtual file systems, slug-based blogs, or docs proxies. Pair them with generateStaticParams to pre-render known paths while letting unknown ones fall through to the loader.
Try it
// 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>
);
}