Rrouting Paralel në NextJS

Në NextJS mund të bëhet që një pjesë e faqes të shfaqë përmbajtje të ndryshme në varësi të URL-së së kërkuar. Kjo quhet rrouting paralel.

Le të shohim një shembull. Le të themi se kemi layout-in e mëposhtëm të faqes:

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

Le të themi se duam që në header të shfaqet informacion dinamik. Le të themi se në URL /users të shfaqet komponenti me përdoruesit, dhe në URL /posts komponenti me postimet.

Për këtë rrouting paralel duhet bërë një dosje të veçantë, duke filluar emrin e saj me shenjën @. Për shembull, le ta emërojmë dosjen tonë @info.

Në këtë dosje do të vendosim dy komponentë. Njeri për të shfaqur përdoruesit në dosjen /users/, dhe tjetri për të shfaqur postimet në dosjen /posts/. Do të kemi strukturën e mëposhtme skedarësh:

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

Tani na duhet në layout-in e faqes të shkruajmë një komandë të veçantë për futje. Për këtë duhet përdorur një slot dinamik të veçantë.

Për të kuptuar se çfarë është, së pari shikoni parametrin e funksionit të layout-it tonë të faqes:

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

Kushtojini vëmendje faktit që si parametër na kaltohet një objekt, nga i cili ne nxjerrim përmbajtjen e faqes në variablin children.

Në këtë objekt mund të ketë edhe çelësa të tjerë. Ata korrespondojnë me ato dosje, emri të cilave e kemi filluar me @.

Në rastin tonë kemi dosjen @info, që do të thotë se do të kemi të përdorshme variablin info, e cila në varësi të URL-së do të përmbajë tekstin e njërit prej komponentëve - përdoruesit ose postimet. Le ta marrim këtë variabël:

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

Tani brenda strukturës së layout-it mund të shfaqim variablin info. Në këtë vend, në varësi të URL-së, do të futet teksti i njërit prej komponentëve tanë:

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