Advanced Routing Patterns

The App Router also provides a set of conventions to help you implement more advanced routing patterns. These include:

• Route Groups (opens in a new tab): The hierarchy of the app folder maps directly to URL paths. However, it’s possible to break out of this pattern by creating a route group. Route groups can be used to:
  • Organize routes without affecting the URL structure.
  • Opting-in specific route segments into a layout (opens in a new tab).
  • Create multiple root layouts (opens in a new tab) by splitting your application.
• Parallel Routes (opens in a new tab): Allow you to simultaneously show two or more pages in the same view that can be navigated independently. You can use them for split views that have their own sub-navigation. E.g. Dashboards.
• Intercepting Routes (opens in a new tab): Allow you to intercept a route and show it in the context of another route. You can use these when keeping the context for the current page is important. E.g. Seeing all tasks while editing one task or expanding a photo in a feed.

For now we’ll only talk about Route groups which lets us to create multiple Root Layouts (opens in a new tab).

Depending on the attraction that this guide will get, In the future ill touch on Parallel routes and Intercepting routes, It is a really nice feature and improves the user experience a lot but introduces a lot of overhead for the developer. So hit me up guys if you’d like to go deeper on those features.

Route Groups

From Next.js docs

In the app directory, nested folders are normally mapped to URL paths. However, you can mark a folder as a Route Group to prevent the folder from being included in the route's URL path.

This allows you to organize your route segments and project files into logical groups without affecting the URL path structure.

Route groups are useful for:

• Organizing routes into groups (opens in a new tab) e.g. by site section, intent, or team.
• Enabling nested layouts (opens in a new tab) in the same route segment level:
  • Creating multiple nested layouts in the same segment, including multiple root layouts (opens in a new tab)
  • Adding a layout to a subset of routes in a common segment (opens in a new tab)

Convention

A route group can be created by wrapping a folder's name in parenthesis: (folderName)

Multiple Root layouts

This is a useful feature, especially when we want to create multiple Root Layouts for different sections of our website. For example, if we have a user dashboard that requires a different header and navigation compared to the homepage, we can easily accomplish that using multiple Root Layouts.

Let's explore the hierarchical structure of creating multiple Root layouts. To illustrate this concept, let's consider the following example:

To create multiple Root layouts, we need to create a new parent folder for each layout. In this case, we'll create two parent folders: (home) and (dashboard). These parent folders will contain the respective pages, components, styles, and other files associated with each Root layout.

So let’s summarize and simplify what we have done here.

1. First, we removed the main root layout of our application layout.tsx, similar to the _app.js file in the pages directory.
2. Next, we created two new root layouts using route groups. By defining these route groups with the () syntax, Next.js recognizes them. If the development server is running, Next.js automatically generates a root layout (layout.tsx) for us.
3. Now, any new pages we declare within either route group will automatically inherit the intended layout that we have specified.

Good to know:

• The naming of route groups has no special significance other than for organization. They do not affect the URL path.
• Routes inside route groups should not resolve to the same URL path. For example, since route groups don't affect URL structure, (marketing)/about/page.js and (shop)/about/page.js would both resolve to /about and cause an error.
• Navigating across multiple root layouts will cause a full page load (as opposed to a client-side navigation). For example, navigating from /cart that uses app/(shop)/layout.js to /blog that uses app/(marketing)/layout.js will cause a full page load. This only applies to multiple root layouts.