Równoległe routowanie w NextJS

W NextJS można sprawić, aby część strony wyświetlała różną treść w zależności od żądanego URL. Nazywa się to równoległym routowaniem.

Spójrzmy na przykład. Załóżmy, że mamy następujący układ strony:

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

Załóżmy, że chcemy, aby w nagłówku wyświetlały się dynamiczne informacje. Niech pod adresem /users wyświetla się komponent z użytkownikami, a pod adresem /posts komponent z postami.

Do takiego równoległego routowania trzeba utworzyć specjalny folder, zaczynając jego nazwę od symbolu @. Dla przykładu nazwijmy nasz folder @info.

W tym folderze umieścimy dwa komponenty. Pierwszy do wyświetlania użytkowników w folderze /users/, a drugi do wyświetlania postów w folderze /posts/. Otrzymamy następującą strukturę plików:

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

Teraz musimy w układzie strony napisać specjalną komendę do wstawienia. W tym celu należy użyć specjalnego dynamicznego slotu.

Aby zrozumieć, co to jest, najpierw spójrz na parametr funkcji naszego układu strony:

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

Zwróć uwagę, że parametrem przekazywany jest obiekt, z którego pobieramy treść strony do zmiennej children.

W tym obiekcie mogą znajdować się inne klucze. Odpowiadają one tym folderom, których nazwy zaczęliśmy od @.

W naszym przypadku mamy folder @info, co oznacza, że będziemy mieli dostępną zmienną info, która w zależności od URL będzie zawierała tekst jednego z komponentów - użytkowników lub posty. Pobierzmy tę zmienną:

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

Teraz wewnątrz struktury układu możemy wyświetlić zmienną info. W to miejsce, w zależności od URL, będzie wstawiany tekst jednego z naszych komponentów:

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