Routing & Navigation

Next.js uses the file system to define routes. This lesson dives deeper into dynamic routes, route groups, parallel routes, intercepting routes, middleware, the Link component, useRouter, and redirects.

---

Dynamic Routes

Use square brackets to create routes with dynamic parameters:

src/app/blog/[slug]/page.tsx    →  /blog/my-first-post
src/app/users/[id]/page.tsx     →  /users/42

// src/app/blog/[slug]/page.tsx
interface Props {
  params: Promise<{ slug: string }>;
}

export default async function BlogPost({ params }: Props) {
  const { slug } = await params;
  const post = await getPost(slug);

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}

Catch-All Routes

src/app/docs/[...slug]/page.tsx

Matches /docs/a, /docs/a/b, /docs/a/b/c, etc.

interface Props {
  params: Promise<{ slug: string[] }>;
}

export default async function DocsPage({ params }: Props) {
  const { slug } = await params;
  // slug = ["a", "b", "c"] for /docs/a/b/c
  return <p>Path: {slug.join(" / ")}</p>;
}

Optional Catch-All Routes

src/app/docs/[[...slug]]/page.tsx

Also matches /docs (the base path without any segments).

---

Route Groups

Organise routes without affecting the URL structure using parentheses:

src/app/
├── (marketing)/
│   ├── layout.tsx         # Marketing layout
│   ├── page.tsx           # /
│   └── about/
│       └── page.tsx       # /about
├── (dashboard)/
│   ├── layout.tsx         # Dashboard layout
│   ├── dashboard/
│   │   └── page.tsx       # /dashboard
│   └── settings/
│       └── page.tsx       # /settings
└── (auth)/
    ├── layout.tsx         # Auth layout (minimal)
    ├── login/
    │   └── page.tsx       # /login
    └── register/
        └── page.tsx       # /register

The folder names in parentheses are not part of the URL.

---

Parallel Routes

Render multiple pages in the same layout simultaneously using named slots:

src/app/dashboard/
├── layout.tsx
├── page.tsx
├── @analytics/
│   └── page.tsx
└── @team/
    └── page.tsx

// src/app/dashboard/layout.tsx
export default function DashboardLayout({
  children,
  analytics,
  team,
}: {
  children: React.ReactNode;
  analytics: React.ReactNode;
  team: React.ReactNode;
}) {
  return (
    <div className="grid grid-cols-2 gap-4">
      <div>{children}</div>
      <div>{analytics}</div>
      <div>{team}</div>
    </div>
  );
}

---

Intercepting Routes

Intercept a route to show content in a different context (e.g. a modal):

src/app/
├── feed/
│   └── page.tsx              # /feed (list of photos)
├── photo/[id]/
│   └── page.tsx              # /photo/123 (full page)
└── feed/
    └── (.)photo/[id]/
        └── page.tsx          # Intercepts /photo/123 when navigated from /feed

Interception Convention