Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Oppiskele Route Groups and Organization Basics | Section
Building Web Apps with Next.js

bookRoute Groups and Organization Basics

Pyyhkäise näyttääksesi valikon

As your application grows, the app/ folder can become large and harder to manage. You may want to organize your files into logical groups without affecting the URL structure.

Next.js provides route groups for this purpose.

Route groups allow you to group related routes together in folders without adding those folders to the URL.

Creating a Route Group

To create a route group, wrap the folder name in parentheses.

Example:

app/
  (marketing)/
    about/
      page.tsx
    contact/
      page.tsx

What URLs This Creates

Even though the files are inside (marketing), the URLs remain: /about, /contact.

The (marketing) folder does not appear in the URL.

Why Use Route Groups

  • Organize large applications into logical sections;
  • Separate different parts of the app (e.g. marketing vs dashboard);
  • Keep the URL clean and user-friendly;
  • Improve maintainability without changing routing.

Example - Separating App Areas

app/
  (marketing)/
    page.tsx
    about/
      page.tsx
  (dashboard)/
    dashboard/
      page.tsx

This creates routes like:

  • /;
  • /about;
  • /dashboard.

Even though the structure is grouped internally.

When to Use Route Groups

Use route groups when:

  • Your project becomes large;
  • You want to separate concerns (e.g. public vs authenticated areas);
  • You need better organization without changing URLs.
question mark

What is the purpose of route groups in Next.js?

Valitse oikea vastaus

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 1. Luku 10

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Osio 1. Luku 10
some-alt