React Academy · Lesson

Dynamic Routes & Route Groups

Create [slug] dynamic segments, route groups with (folder), and parallel routes.

Dynamic Routes & Route Groups is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Dynamic Segments

Wrap a folder name in square brackets to create a dynamic segment. The value is available in params passed to the page.

// app/products/[id]/page.tsx
export default function ProductPage({ params }: { params: { id: string } }) {
  return <h1>Product {params.id}</h1>;
}
// → /products/123 → params.id = '123'

Typed Params

Params are always strings in the URL. Parse them explicitly for numeric IDs.

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  if (!post) notFound();
  return <article>{post.content}</article>;
}

Catch-All Segments

Use [...slug] to match any number of path segments. The value is an array of strings.

// app/docs/[...path]/page.tsx
export default function DocsPage({ params }: { params: { path: string[] } }) {
  // /docs/react/hooks → params.path = ['react', 'hooks']
  return <DocViewer path={params.path} />;
}

Optional Catch-All

[[...slug]] matches the root segment too — useful for optional path prefixes.

// app/[[...lang]]/page.tsx
// Matches /, /en, /en/about, /fr/products/123
export default function Page({ params }: { params: { lang?: string[] } }) {
  const lang = params.lang?.[0] ?? 'en';
  return <div lang={lang}>...</div>;
}

generateStaticParams

Export generateStaticParams() to pre-render dynamic routes at build time, producing static HTML for each param combination.

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(p => ({ slug: p.slug }));
}
// → builds /blog/hello-world, /blog/react-tips etc. statically

Route Groups — (folder)

Wrap a folder name in parentheses to create a route group. It organizes files without adding a URL segment.

// File structure:
// app/(marketing)/about/page.tsx → /about
// app/(marketing)/blog/page.tsx  → /blog
// app/(app)/dashboard/page.tsx   → /dashboard
// (marketing) and (app) don't appear in URLs

Route Groups with Shared Layouts

Each route group can have its own layout.tsx, giving different layouts to different sections without URL nesting.

// app/(marketing)/layout.tsx — marketing shell
// app/(app)/layout.tsx — authenticated app shell
// Both groups share app/layout.tsx as the root

Parallel Routes — @slot

Prefix a folder with @ to create a slot. Slots render in the parent layout simultaneously — useful for modals, split-screen, or tabs.

// app/@modal/login/page.tsx
// app/layout.tsx
export default function RootLayout({ children, modal }) {
  return (
    <div>
      {children}
      {modal} {/* renders @modal/login/page.tsx side by side */}
    </div>
  );
}

Intercepting Routes — (..)

Use (..) notation to intercept a route and render it inline (e.g., open a photo in a modal instead of navigating to a new page).

// Soft navigation shows modal:
// app/@modal/(..)/photos/[id]/page.tsx
// Hard navigation shows full page:
// app/photos/[id]/page.tsx

Dynamic Route Metadata

Export an async generateMetadata function in dynamic routes to set per-page SEO tags based on route params.

export async function generateMetadata({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  return { title: product.name, description: product.description };
}

Quick Check

What does wrapping a folder name in parentheses do in Next.js App Router?

Recap

[id] creates dynamic segments, [...slug] catches all sub-paths, and [[...slug]] makes them optional. Route groups with (name) organize code without URL impact and enable per-group layouts. Use generateStaticParams for build-time pre-rendering.

Frequently asked questions

Is the “Dynamic Routes & Route Groups” lesson free?

Yes — the full text of “Dynamic Routes & Route Groups” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Dynamic Routes & Route Groups”?

Create [slug] dynamic segments, route groups with (folder), and parallel routes. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Dynamic Routes & Route Groups” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy