Паралелен рутирање во 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>
  );
}