Rutarea Paralelă în NextJS

În NextJS poți face ca o parte a site-ului să afișeze conținut diferit în funcție de URL-ul solicitat. Aceasta se numește rutare paralelă.

Să privim un exemplu. Să presupunem că avem următorul layout de site:

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

Să presupunem că vrem ca în header să fie afișată informație dinamică. Să zicem că la URL-ul /users să fie afișat un component cu utilizatori, iar la URL-ul /posts un component cu postări.

Pentru această rutare paralelă trebuie să creezi un folder special, începând numele său cu simbolul @. De exemplu, să numim folderul nostru @info.

În acest folder vom plasa două componente. Primul pentru afișarea utilizatorilor în folderul /users/, iar al doilea pentru afișarea postărilor în folderul /posts/. Vom obține următoarea structură de fișiere:

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

Acum trebuie în layout-ul site-ului să scriem o comandă specială pentru inserare. Pentru asta trebuie să folosim un slot dinamic special.

Pentru a înțelege ce este, mai întâi priviți parametrul funcției layout-ului nostru:

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

Observați că parametrul este un obiect, din care extragem conținutul site-ului în variabila children.

În acest obiect pot fi și alte chei. Ele corespund acelor folderere ale căror nume le-am început cu @.

În cazul nostru avem folderul @info, ceea ce înseamnă că vom avea acces la variabila info, care în funcție de URL va conține textul unuia dintre componente - utilizatori sau postări. Să obținem această variabilă:

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

Acum în interiorul layout-ului putem afișa variabila info. În acest loc, în funcție de URL, va fi inserat textul unuia dintre componentele noastre:

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