Parallel Routing in NextJS

In NextJS, it is possible to make a part of the site display different content depending on the requested URL. This is called parallel routing.

Let's look at an example. Suppose we have the following site layout:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    <html lang="en">
      <body>
        <header>
          header
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}

Let's say we want the header to display dynamic information. Let the URL /users display a component with users, and the URL /posts display a component with posts.

For such parallel routing, you need to create a special folder, starting its name with the symbol @. For example, let's name our folder @info.

In this folder, we will place two components. The first one for displaying users in the folder /users/, and the second one for displaying posts in the folder /posts/. We will get the following file structure:

• /app//@info//users/page.jsx/posts/page.jsx

Now we need to write a special command for insertion in the site layout. For this, we need to use a special dynamic slot.

To understand what it is, first look at the parameter of our site layout function:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    
  );
}

Pay attention to the fact that an object is passed as a parameter, from which we extract the site content into the variable children.

There can be other keys in this object. They correspond to those folders whose names start with @.

In our case, we have the folder @info, which means we will have access to the variable info, which, depending on the URL, contains the text of one of the components - users or posts. Let's get this variable:

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    
  );
}

Now inside the layout markup, we can output the variable info. Depending on the URL, the text of one of our components will be inserted into this place:

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    <html lang="en">
      <body>
        <header>
          <div>
            {info}
          </div>
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}