Paraqitjet e mbivendosura në NextJS

Siç e dini, në dosjen /app në skedarin /layout.jsx ndodhet paraqitja kryesore e faqes.

Sidoqoftë, nëse dëshironi, në dosjet e mbivendosura mund të krijoni paraqitjet tuaja. Në këtë rast, përmbajtja e faqes do të futet së pari në paraqitjen e mbivendosur, dhe pastaj rezultati i përftuar do të futet në paraqitjen kryesore.

Le ta provojmë në praktikë. Le të supozojmë se paraqitja jonë kryesore ka pamjen e mëposhtme:

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ë bëjmë një tjetër, paraqitje të mbivendosur për të gjitha përmbajtjet nga dosja /users:

app/users/layout.jsxexport default function UsersLayout({children}) {
  return (
    <div className="info">
      mesazh për të gjithë përdoruesit
    </div>
    <div className="content">
      {children}
    </div>
  );
}

Siç e shihni, në këtë paraqitje ne nuk përcaktojmë etiketat kryesore të faqes, pasi ato janë tashmë në paraqitjen tonë kryesore të faqes.

Le të bëjmë gjithashtu një skedar me përmbajtje për të shfaqur përdoruesin:

src/app/users/show/page.jsxexport default function User() {
  return <>
    <h1>Përdoruesi</h1>
    <p>
      përshkrimi i përdoruesit
    </p>
  </>;
}

Pas këtyre manipulimeve, struktura jonë e skedarëve do të duket kështu:

• /app/layout.jsx/users/layout.jsx/show/page.jsx

Tani, nëse i drejtohemi URL-it përkatës, NextJS do t'i mbledhë të gjitha së bashku dhe në shfletues ne do të marrim kodin përfundimtar HTML të mëposhtëm:

html<html lang="en">
  <body>
    <header>
      header
    </header>
    <main>
      <div class="info">
        mesazh për të gjithë përdoruesit
      </div>
      
      <h1>Përdoruesi</h1>
      <p>
        përshkrimi i përdoruesit
      </p>
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>