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:

export default function Reg() {
	return <h1>register</h1>;
}

Let's create the file for the authorization page:

export default function Log() {
	return <h1>login</h1>;
}

Perform the manipulations described in the lesson. Make sure everything works as expected.