Layout Bersarang dalam NextJS

Seperti yang anda tahu, dalam folder /app dalam fail /layout.jsx terletak layout utama laman web.

Walau bagaimanapun, jika dikehendaki, dalam folder bersarang anda boleh mencipta layout anda sendiri. Dalam kes ini, kandungan halaman akan pertama dimasukkan ke dalam layout bersarang, dan kemudian hasil yang diperoleh akan dimasukkan ke dalam layout utama.

Mari kita cuba dalam praktik. Katakan layout utama kami mempunyai penampilan berikut:

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

Mari buat satu lagi, layout bersarang untuk semua kandungan dari folder /users:

app/users/layout.jsxexport default function UsersLayout({children}) {
  return (
    <div className="info">
      message for all users
    </div>
    <div className="content">
      {children}
    </div>
  );
}

Seperti yang anda lihat, dalam layout ini kami tidak menunjukkan tag utama halaman, kerana ia sudah ada dalam layout utama laman web kami.

Mari juga buat fail dengan kandungan untuk menunjukkan pengguna:

src/app/users/show/page.jsxexport default function User() {
  return <>
    <h1>User</h1>
    <p>
      user description
    </p>
  </>;
}

Selepas manipulasi ini, struktur fail kami akan kelihatan seperti ini:

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

Sekarang, jika anda pergi ke URL yang sesuai, NextJS akan mengumpulkan semuanya dan dalam pelayar kita akan mendapat kod HTML akhir berikut:

html<html lang="en">
  <body>
    <header>
      header
    </header>
    <main>
      <div class="info">
        message for all users
      </div>
      
      <h1>User</h1>
      <p>
        user description
      </p>
    </main>
    <footer>
      footer
    </footer>
  </body>
</html>