NextJs App Router ~Route Groups~

UpdatedMarch 27, 2026

•1 min read

Route Groups in Next.js 16 allow you to organize folders within your app and apply layouts to specific routes without affecting the URL structure. By naming folders in the format (folder-name), they function as organizational groups, enabling you to logically separate the route hierarchy.

Key Features and Use Cases

・Organization and Grouping: Organize directories by function, such as pre-login (auth) and post-login (dashboard).

・Selective Layout Application: Apply a common layout (layout.tsx) only within specific groups.

・No Impact on URLs: Grouped folder names are not reflected in the URL.

・Multiple Root Layouts: You can separate root layouts (including the <html> tag) for each root group within different app directories.

Implementation Example

By organizing the folder structure as shown below, you can flexibly manage the layout—for example, by using different layouts for the /about page depending on whether the user is authenticated.

app/
├── (auth)/
│   ├── login/
│   │   └── page.tsx
│   └── layout.tsx  // Login Layout
└── (dashboard)/
    ├── dashboard/
    │   └── page.tsx
    └── layout.tsx  // Dashboard Layout

4 views