Advanced Routing

Dynamic routes, catch-all routes, route groups, parallel routes, and intercepting routes.

Overview

Next.js App Router provides powerful routing patterns for complex applications.

Key Concepts

• Dynamic Routes — [param] files for URL parameters
• Catch-All Routes — [...slug] for multiple segments
• Route Groups — (group) folders without affecting URL
• Parallel Routes — @slot for simultaneous route rendering
• Intercepting Routes — (..) for modal patterns

Code Examples

// app/blog/[slug]/page.js
export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}

// app/shop/[...slug]/page.js
export default async function ShopPage({ params }) {
  // URL: /shop/shoes/nike/air-max
  // params.slug = ['shoes', 'nike', 'air-max']
  return <div>Path: {params.slug.join('/')}</div>;
}

// app/(marketing)/layout.js - Route Group
export default function MarketingLayout({ children }) {
  return (
    <div>
      <MarketingHeader />
      {children}
      <MarketingFooter />
    </div>
  );
}

// app/layout.js - Parallel Routes
export default function Layout({ children, analytics }) {
  return (
    <div>
      {children}
      {analytics}
    </div>
  );
}

// app/@modal/(.)posts/[id]/page.js - Intercepting Route
export default function PostModal({ params }) {
  return (
    <Modal>
      <PostDetails id={params.id} />
    </Modal>
  );
}

Practice

Build a dashboard with parallel routes for main content and sidebar.