Route Groups and Nested Layouts

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Use route group syntax
Choose layout boundaries thoughtfully
Tell apart URL structure from code organization

As a project grows, the public website and the logged-in dashboard shouldn't necessarily share the same header. You don't need every folder to show up in the URL — route groups let you organize your code into groups without that.

The key idea

Folder names wrapped in parentheses, like (marketing) and (dashboard), don't show up in the URL. You can put a layout.tsx in each group to have different navigation, sidebars, or access boundaries. That said, you can't have two pages in different groups that resolve to the same URL. Also keep in mind that if you split root layouts across groups, navigating between groups can trigger a full page load.

Let's try it together

text

app/
├─ (marketing)/
│  ├─ layout.tsx
│  ├─ page.tsx          → /
│  └─ about/page.tsx    → /about
└─ (dashboard)/
   ├─ layout.tsx
   ├─ notes/page.tsx    → /notes
   └─ profile/page.tsx  → /profile

How the code works

In the structure below, (marketing)/about/page.tsx resolves to the URL /about, and (dashboard)/notes/page.tsx resolves to /notes. You never type the parentheses into the URL.

You should see

The marketing and dashboard routes each use their own layout, and the group name doesn't appear in the URL.

5-Minute Try-It

Split your current project into two groups, (public) and (workspace), and try giving each layout a different background color.

Next.js — Project Structure — Next.js

Easy traps

Thinking a route group's name shows up in the URL
Creating two pages with the same URL across two different groups

Exercise

Split your current project into two groups, (public) and (workspace), and try giving each layout a different background color.

You'll know it worked when: The marketing and dashboard routes each use their own layout, and the group name doesn't appear in the URL.