Dynamic segments map URL parameters to page props. Catch-all and optional catch-all routes handle nested paths like documentation sites.
Common Interview Questions
Q: Single dynamic segment?
Answer: [slug] matches one path segment. Access via params.slug (await params in Next.js 15+).
// app/blog/[slug]/page.tsx
export default async function Post({ params }) {
const { slug } = await params;
return <Article slug={slug} />;
}
Q: Catch-all vs optional catch-all?
Answer: [...slug] needs one or more segments. [[...slug]] also matches the parent path with empty slug array.
app/docs/[...slug]/page.tsx // requires at least one segment
app/docs/[[...slug]]/page.tsx // matches /docs too
Q: generateStaticParams?
Answer: Pre-render dynamic routes at build time for SSG. Omit for fully dynamic on-demand rendering.
export async function generateStaticParams() {
const posts = await getPosts();
return posts.map((p) => ({ slug: p.slug }));
}
Q: notFound() usage?
Answer: Triggers not-found.tsx UI for missing resources with correct 404 status in production.
import { notFound } from "next/navigation";
if (!post) notFound();
Key Points for Interviews
-
Brackets define dynamic URL segments
-
Catch-all params are string arrays
-
generateStaticParams for build-time paths
-
Validate slug before data fetch
-
Use notFound for missing entities