Паралелен маршрутизация в 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>
  );
}