Next js 13 group routes is a game changer

Have you ever been in a situation where you need some pages to have a specific layout and some other pages to have a different layout?

Or you might want to protect your application except for the login page.

I'm sure you could find some workarounds to achieve that, but they're nowhere as simple as the way we're gonna do it using the new Next js 13 group routes.

So here's how this works:

For each group of files that we want to have its own layout, we're going to place those files inside a separate folder, and the name of that folder will be surrounded by parentheses, this way it doesn't affect our route paths.

For example:

app/(test)/products/page.tsx is the same as:

app/products/page.tsx

But now inside the (test) folder, we can have a layout.tsx file which only affects the files inside of it, so you can have a specific header component for these files or different authentication rules or whatever.

Here's what it would look like: