Паралельны раўтынг у 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>
  );
}