Paralelni rutiranje u NextJS

U NextJS-u je moguće napraviti tako da deo sajta prikazuje različit sadržaj zavisno od traženog URL-a. Ovo se zove paralelno rutiranje.

Hajde da pogledamo na primeru. Pretpostavimo da imamo sledeći layout sajta:

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

Pretpostavimo da želimo da se u header-u prikazuju dinamičke informacije. Neka za URL /users bude prikazan komponent sa korisnicima, a za URL /posts komponent sa postovima.

Za ovakvo paralelno rutiranje potrebno je napraviti posebnu fasciklu, čije ime počinje sa simbolom @. Za primer, nazvaćemo našu fasciklu @info.

U ovoj fascikli ćemo smestiti dva komponenta. Prvi za prikaz korisnika u fascikli /users/, a drugi za prikaz postova u fascikli /posts/. Dobićemo sledeću strukturu fajlova:

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

Sada u layout-u sajta treba da napišemo posebnu komandu za umetanje. Za to je potrebno koristiti poseban dinamički slot.

Da biste razumeli šta je to, prvo pogledajte parametar funkcije našeg layout-a sajta:

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

Obratite pažnju na to da se parametrom prosledjuje objekat, iz kojeg izdvajamo sadržaj sajta u promenljivu children.

U ovom objektu mogu biti i drugi ključevi. Oni odgovaraju onim fasciklama čije je ime počinjalo sa @.

U našem slučaju imamo fasciklu @info, što znači da će nam biti dostupna promenljiva info, koja će zavisno od URL-a sadržati tekst jednog od komponenta - korisnike ili postove. Dobijamo ovu promenljivu:

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

Sada unutar markup-a layout-a možemo prikazati promenljivu info. Na ovo mesto će zavisno od URL-a biti umetnut tekst jednog od naših komponenta:

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