Параллельный роутинг в NextJS

В NextJS можно сделать так, чтобы часть сайта показывала различное содержимое в зависимости от запрошенного URL. Это называется параллельный роутинг.

Давайте посмотрим на примере. Пусть у нас есть следующий макет сайта:

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

Пусть мы хотим, чтобы в хедере выводилась динамическая информация. Пусть по URL /users будет выводиться компонент с юзерами, а по URL /posts компонент с постами.

Для такого параллельного роутинга нужно сделать специальную папку, начав ее имя с символа @. Для примера назовем нашу папку @info.

В этой папке разместим два компонента. Первый для показа юзеров в папке /users/, а второй для показа постов в папке /posts/. У нас получится следующая файловая структура:

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

Теперь нам нужно в макете сайта написать специальную команду на вставку. Для этого нужно использовать специальный динамический слот.

Чтобы понять, что это, для начала посмотрите на параметр функции нашего макета сайта:

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

Обратите внимание на то, что параметром у нас передается объект, из которого мы извлекаем контент сайта в переменную children.

В этом объекте могут быть и другие ключи. Они соответствуют тем папкам, имя которых мы начали с @.

В нашем случае у нас есть папка @info, а это значит, что у нас будет доступна переменная info, в зависимости от URL содержащая текст одного из компонентов - юзеров или посты. Получим эту переменную:

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

Теперь внутри верстки макета мы можем вывести переменную info. В это место в зависимости от URL и будет вставляться текст одного из наших компонентов:

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>
  );
}