Kandungan dalam Susun Atur Laman Web NextJS

Mari kita lihat susun atur asas laman web, yang kami mula bincangkan dalam pelajaran lepas:

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

Seperti yang anda lihat, susun atur laman web adalah komponen dengan fungsi. Pada masa yang sama, objek dihantar ke parameter fungsi, dari mana kami mengekstrak kunci children ke dalam pembolehubah yang sepadan. Pembolehubah ini menyimpan kandungan fail page.jsx, yang sepadan dengan URL yang diminta.

Iaitu, dalam fail layout.jsx kami menyimpan susun atur laman web, dan dengan menggunakan pembolehubah children kami menunjukkan tempat dalam susun atur laman web di mana kandungan halaman harus dimasukkan.

Sebagai contoh, mari kita letakkan kandungan halaman dalam beberapa tag:

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