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: