Vzporedno usmerjanje v NextJS

V NextJS je mogoče narediti tako, da del spletnega mesta prikaže različno vsebino odvisno od zahtevanega URL-ja. To se imenuje vzporedno usmerjanje.

Poglejmo si na primeru. Recimo, da imamo naslednjo postavitev spletnega mesta:

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

Recimo, da želimo, da se v glavi prikaže dinamična informacija. Naj bo na URL /users prikazan komponenta z uporabniki, na URL /posts pa komponenta z objavami.

Za takšno vzporedno usmerjanje je potrebno narediti posebno mapo, katere ime se začne s simbolom @. Za primer poimenujmo našo mapo @info.

V to mapo postavimo dva komponenta. Prvi za prikaz uporabnikov v mapi /users/, drugi za prikaz objav v mapi /posts/. Dobili bomo naslednjo datotečno strukturo:

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

Zdaj moramo v postavitvi spletnega mesta napisati poseben ukaz za vstavljanje. Za to je potrebno uporabiti posebno dinamično režo.

Da bi razumeli, kaj to je, najprej poglejte parameter funkcije naše postavitve spletnega mesta:

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

Bodite pozorni na to, da se kot parameter podaja objekt, iz katerega izluščimo vsebino spletnega mesta v spremenljivko children.

V tem objektu so lahko tudi drugi ključi. Ti ustrezajo tem mapam, katerih ime smo začeli z @.

V našem primeru imamo mapo @info, kar pomeni, da bomo imeli dostopno spremenljivko info, ki bo odvisno od URL-ja vsebovala besedilo enega od komponent - uporabnikov ali objav. Pridobimo to spremenljivko:

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

Zdaj lahko znotraj postavitve ogrodja izpišemo spremenljivko info. Na to mesto se bo odvisno od URL-ja vstavilo besedilo enega od naših komponent:

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