Starting from Next.js 13.4, Vercel introduced the App Router with a whole set of new and exciting features. The way we organize the routing in our application has changed radically compared to previous versions of Next.js, as well as the definition and usage of Layouts for our pages. In this article, we will focus on what is called Route Groups, their use cases, and how they can help us in our developer experience.
Basic introduction to the new App Router
In version 13, Next.js introduced a new App Router built on React Server Components, which supports shared layouts, nested routing, loading states, error handling, and more.
The App Router works in a new directory named app
Creating a page.tsx file inside the app/test-page folder allows you to define what users are going to see when they navigate to /test-page. So folder’s names inside app directory define your app routes.
You can also have nested routes like this:
In this case, the URL of your page will be /test-page/nested-page
By default, components inside app are React Server Components. This is a performance optimization and allows you to easily adopt them, and you can also use Client Components.
Layouts
In Next.js, a Layout file is a special component that is used to define the common structure and layout of multiple pages in your application. It acts as a wrapper around the content of each page, providing consistent styling, structure, and functionality.
The purpose of a Layout file is to encapsulate shared elements such as headers, footers, navigation menus, sidebars, or any other components that should be present on multiple pages. By using a Layout file, you can avoid duplicating code across multiple pages and ensure a consistent user experience throughout your application.
To create a Layout file in Next.js, you typically create a separate component file, such as Layout.tsx, and define the desired layout structure within it. This component can then be imported and used on individual pages where you want to apply the shared layout.
By wrapping your page content with the Layout component, Next.js will render the shared layout around each page, providing a consistent look and feel. This approach simplifies the management of common elements and allows for easy updates or modifications to the layout across multiple pages.
Here is an example of how to use a Layout file with the new App Router
Route Groups
In Next.js, the folders in your app directory usually correspond to URL paths. But if you mark a folder as a Route Group, it won't be included in the URL path of the route.
This means you can organize your routes and project files into groups without changing the URL structure.
Route groups are helpful for:
-
Organizing routes into groups based on site sections, intent, or teams.
-
Creating nested layouts within the same route segment level:
-
You can have multiple nested layouts in the same segment, even multiple root layouts.
-
You can add a layout to only a subset of routes within a common segment.
-
To create a route group inside your app folder you just need to wrap the folder’s name in parenthesis: (folderName)
Since route groups won’t change the URL structure your page.tsx content will be shown under the/inside-route-group path.
Use cases
Route groups are amazing when you want to create multiple layouts inside your page:
Or if you want to specify a layout for a specific group of pages
You need to be careful because all the examples above can lead you to some misunderstanding.
What is root layout? The top-most layout is called the Root Layout. This required layout is shared across all pages in an application.
As you can see, the route folder in the two examples above always has a well-defined root layout. This means that the specific layouts we have defined for the various groups will not replace the root layout, but will be added to it. However, Route Groups also allow us to redefine the root layout. Specifically, they allow us to define different root layouts for different segments of pages.
All we have to do is remove the common Root Layout file, create some Route groups, and re-define the different Root layout files for every group in the route folder:
In this way, we will have pages with different root layouts, and our paths will once again not be affected by the folder name used in parentheses.
Conclusion
In conclusion, Next.js route groups offer a powerful and flexible solution for organizing and managing routes in your Next.js applications. By grouping related routes together, you can improve code organization, enhance maintainability, and promote code reusability. Route groups allow for the use of shared layout components, and the customization of root layouts for different segments of pages. With Next.js route groups, you can streamline your development process, create a more intuitive routing structure, and ultimately deliver a better user experience.
