What is dynamic routing in Next.js?
Why Interviewers Ask This
Foundational questions like this help interviewers calibrate the rest of the interview. A confident, accurate answer signals that you have solid Next.js basics — a prerequisite for any developer role.
Answer
Dynamic routes in Next.js use brackets in folder/file names to capture URL segments as parameters. App Router: app/posts/[id]/page.tsx — matches /posts/1, /posts/abc. Access via props: export default function PostPage({ params }: { params: { id: string } }). Types of dynamic segments: (1) [slug] — single dynamic segment: /posts/hello-world; (2) [...slug] — catch-all: /posts/2024/01/hello — params.slug = ["2024", "01", "hello"]; (3) [[...slug]] — optional catch-all: matches /posts AND /posts/hello — params.slug is undefined for the empty case. generateStaticParams (App Router): for SSG with dynamic routes — tells Next.js which paths to pre-render at build time: export async function generateStaticParams() { const posts = await getPosts(); return posts.map(post => ({ id: post.id })); }. Pages Router: pages/posts/[id].tsx; access via useRouter().query.id or getServerSideProps context.params. Dynamic groups: pages/posts/[...slug].tsx. Parallel routes (App Router): app/@modal/(.)photo/[id]/page.tsx — render multiple pages simultaneously. Route interception: (.)path — intercept routes from current level, enabling modal patterns without URL changes.
Common Mistake
Candidates often give textbook answers here. Interviewers are more impressed when you relate the concept to a specific problem you solved in a real Next.js project.