Q9: How do Dynamic Routes, Catch-all, and Optional Catch-all routes work in Next.js?
- Dynamic Route (
[id]): Matches single segment parameter (/posts/1->{ id: '1' }). - Catch-all (
[...slug]): Matches multiple path segments (/shop/clothes/shoes->{ slug: ['clothes', 'shoes'] }). Requires segment to exist. - Optional Catch-all (
[[...slug]]): Matches multiple segments AND root path (/shop->{ slug: undefined }).
Reading Dynamic Route Params in App Router
// app/shop/[[...slug]]/page.js
export default async function ShopPage({ params }) {
const { slug } = await params; // Array or undefined
return <p>Active Path Categories: {slug ? slug.join(' > ') : 'Root Shop'}</p>;
}💡 Optional catch-all handles /shop, /shop/men, and /shop/men/shoes inside a single page file.
Key Takeaways
[id]captures a single path segment.[...slug]captures array of segments;[[...slug]]also matches the base route without segments.
Knowledge Check
Which folder naming convention matches both /docs AND /docs/installation/setup?