Routes Group - Next.js

We know that creating any folder in App Router creates a route. But if you want to create nested route without breaking URL. You can use routes group. You want to make routes like: http://localhost:3000/signout and http://localhost:3000/signin First, take a look at the problem, if you do in general. app/ ├── auth/ │ ├── login/ │ │ └── page.js | ├── logout/ │ │ └── page.js └── layout.js Now try to access http://localhost:3000/signout _ and http://localhost:3000/signin. You are redirected to 404 Not Found Page. What happens? app is the root route. Then you add another directory named auth. Into auth login and logout belong. So the URL becomes http://localhost:3000/auth/signout _ and http://localhost:3000/auth/signin. Go to those links you will see your signing or signout page. But you don't want to add auth to your routes. How can you achieve it? routes group: The folder you don't want to add as a route, keep the folder name in parentheses(). You have done it! It is so simple in Next.js. app/ ├── (auth)/ │ ├── login/ │ │ └── page.js | ├── logout/ │ │ └── page.js └── layout.js Now go to those links: http://localhost:3000/signout_ And http://localhost:3000/signin, you will find your pages. By using routes group, you can keep your route structure clean, modular, and layout focused.

Apr 22, 2025 - 10:36

We know that creating any folder in App Router creates a route. But if you want to create nested route without breaking URL. You can use routes group.
You want to make routes like: http://localhost:3000/signout
and http://localhost:3000/signin
First, take a look at the problem, if you do in general.

app/
├── auth/
│   ├── login/
│   │   └── page.js
|   ├── logout/
│   │   └── page.js
└── layout.js

Now try to access http://localhost:3000/signout _
and http://localhost:3000/signin. You are redirected to 404 Not Found Page.
What happens?
app is the root route. Then you add another directory named auth. Into auth login and logout belong. So the URL becomes http://localhost:3000/auth/signout _
and http://localhost:3000/auth/signin.
Go to those links you will see your signing or signout page.

But you don't want to add `auth` to your routes. How can you achieve it?

routes group: The folder you don't want to add as a route, keep the folder name in parentheses(). You have done it! It is so simple in Next.js.

app/
├── (auth)/
│   ├── login/
│   │   └── page.js
|   ├── logout/
│   │   └── page.js
└── layout.js

Now go to those links: http://localhost:3000/signout_
And http://localhost:3000/signin, you will find your pages.

By using routes group, you can keep your route structure clean, modular, and layout focused.