Dynamic RoutingIntermediate
1Question 1 of 1
typescriptHow does Dynamic Routing and Catch-all Segments work in Next.js?
Explanation & Concept
• Dynamic Segments: Folder named with brackets `[slug]`, accessible via `params.slug`. • Catch-all Segments: `[...slug]` matches all subsequent path segments into an array. • Optional Catch-all: `[[...slug]]` also matches the base route without segments.
Code Example
typescript
// app/docs/[...slug]/page.tsx
export default async function DocPage({ params }: { params: { slug: string[] } }) {
// Navigating to /docs/api/v1/auth makes params.slug = ['api', 'v1', 'auth']
return <div>Document Section: {params.slug.join(" > ")}</div>;
}How It Works & Key Takeaways
Catch-all routes are ideal for documentation portals, multi-level category navigation, and CMS-driven landing pages.
Mock Test · 1 Questions · Optional
Ready for Image Optimization?
Take a quick test to evaluate yourself, or move straight to the next module.
Intermediate1 questions