Grouping Routes in NextJS

Sometimes, for convenience, we may need to group several routes into one folder so that the grouping folder does not create a separate segment in the URL.

To do this, the name of the grouping folder should be enclosed in parentheses. Let's look at an example.

Let's say for the URL /reg we want to create a registration page, and for the URL /log - an authorization page. Let's combine the folders corresponding to these URLs into one common folder named (auth).

Thus, we will get the following file structure:

• /app//(auth)//reg/page.jsx/log/page.jsx

Let's create the file for the registration page:

app/(auth)/reg/page.jsxexport default function Reg() {
  return <h1>register</h1>;
}

Let's create the file for the authorization page:

app/(auth)/log/page.jsxexport default function Log() {
  return <h1>login</h1>;
}