How to Use Route Groups in Next.js

Next.js is a popular framework for building React applications that support server-side rendering, static site generation, and incremental static regeneration. One of the features that Next.js provides is a file-system based router, where folders and files in the app directory are mapped to URL paths.

However, sometimes you may want to organize your routes into logical groups without affecting the URL structure. For example, you may have different layouts for different types of pages, such as blog posts, products, and admin pages. You may also want to group related routes together for better code organization and readability.

This is where route groups come in handy. Route groups are a way to create folders in the app directory that are not included in the URL path, but can still contain pages and other folders. By using route groups, you can achieve the following benefits:

• You can create shared layouts for different groups of pages, such as a blog layout, a product layout, and an admin layout.
• You can separate your routes into modules or features, such as a blog module, a product module, and an admin module.
• You can avoid naming conflicts and duplication of routes, such as having multiple index.js files in different folders.

In this article, we will show you how to use route groups in Next.js, and how to create shared layouts for different groups of pages.

Creating a Route Group

To create a route group, you need to wrap a folder’s name in parentheses, such as (blog), (products), or (admin). This tells Next.js that this folder is a route group, and it should not be included in the URL path. For example, if you have the following folder structure:

app
├── (blog)
│ ├── index.js
│ ├── [slug].js
│ └── _layout.js
├── (products)
│ ├── index.js
│ ├── [id].js
│ └── _layout.js
├── (admin)
│ ├── index.js
│ ├── posts.js
│ ├── products.js
│ └── _layout.js
└── index.js


The corresponding URL paths for the pages are:

/
/blog
/blog/[slug]
/products
/products/[id]
/admin
/admin/posts
/admin/products


As you can see, the route group names are not part of the URL paths, but they still contain pages and other folders.

Creating a Shared Layout

One of the main use cases for route groups is to create shared layouts for different groups of pages. A shared layout is a component that wraps around the page component and provides common elements, such as a header, a footer, a sidebar, or a navigation menu.

To create a shared layout for a route group, you need to create a file named _layout.js in the route group folder. This file should export a default component that receives the page component as a child prop, and renders it along with the layout elements. For example, the _layout.js file for the blog route group could look something like this:

import React from 'react';
import Header from '../components/Header';
import Footer from '../components/Footer';

export default function BlogLayout({ children }) {
return (
<div className="blog-layout"> <Header /> <main>{children}</main> <Footer /> </div>
);
}


Then, in the page components inside the blog route group, you don’t need to import or use the layout component, as Next.js will automatically apply it to the pages. For example, the index.js file for the blog route group could look something like this:

import React from 'react';
import Link from 'next/link';

export default function BlogIndex({ posts }) {
return (
<div className="blog-index"> <h1>Blog</h1> <ul> {posts.map((post) => ( <li key={post.slug}> <Link href={`/blog/${post.slug}`}> <a>{post.title}</a> </Link> </li> ))} </ul> </div>
);
}

export async function getStaticProps() {
// Fetch posts from an API or a file system
const posts = await fetchPosts();

return {
props: {
posts,
},
};
}


You can create similar _layout.js files for other route groups, such as products and admin, and customize them according to your needs.

Conclusion

Route groups are a powerful feature of Next.js that allow you to organize your routes and create shared layouts for different groups of pages. By using route groups, you can improve the structure and maintainability of your Next.js application.

If you want to learn more about route groups, you can check out the official documentation