Dynamic Routes ([id]), Catch-All Routes ([...slug]) & Route Groups ((group))

In the Next.js App Router, advanced routing patterns are defined using folder naming syntax: Square Brackets [param] for dynamic segments, Ellipses [...slug] for catch-all routes, and Parentheses (group) for organizing code without affecting the URL path.

1. Dynamic Route Segments: [param]

When a URL segment is dynamic (such as a blog post slug or user ID):

• Folder: app/blog/[slug]/page.tsx
• URL: /blog/learn-nextjs -> { slug: 'learn-nextjs' }

2. Catch-All & Optional Catch-All Routes

1. Catch-All: [...slug]

Matches any number of subsequent path segments and returns them as a string array:

• Folder: app/docs/[...slug]/page.tsx
• Matches: /docs/getting-started -> { slug: ['getting-started'] }
• Matches: /docs/api/v2/authentication -> { slug: ['api', 'v2', 'authentication'] }
• Does NOT match /docs itself.

2. Optional Catch-All: [[...slug]] (Double Brackets)

Matches all sub-segments AND matches the parent route itself:

• Matches: /docs -> { slug: undefined }
• Matches: /docs/components/button -> { slug: ['components', 'button'] }

3. Route Groups: (groupName)

Route Groups allow organizing folders and sharing specific layouts without affecting the URL path:

Notice that neither (marketing) nor (dashboard) appears in the browser URL!