เนื้อหาในโครงร่างเว็บไซต์ใน NextJS

ลองพิจารณาโครงร่างหลักของเว็บไซต์ ที่เราเริ่มวิเคราะห์ ในบทเรียนที่แล้ว:

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

ดังที่คุณเห็น โครงร่างเว็บไซต์คือ คอมโพเนนต์ที่มีฟังก์ชัน โดยที่ วัตถุถูกส่งผ่านไปยังพารามิเตอร์ของฟังก์ชัน จากนั้นเราก็แยกคีย์ children ออกมาเป็นตัวแปรที่ตรงกัน เนื้อหาของไฟล์ page.jsx ถูกเก็บไว้ในตัวแปรนี้ ซึ่งสอดคล้องกับ URL ที่ร้องขอ

นั่นคือในไฟล์ layout.jsx ของเรา เก็บโครงร่างเว็บไซต์ และด้วยความช่วยเหลือของ ตัวแปร children เราระบุ ตำแหน่งในโครงร่างเว็บไซต์ที่ควรจะ แทรกเนื้อหาของหน้า

ตัวอย่างเช่น ลองจัดรูปแบบเนื้อหา ของหน้าในแท็กบางอย่าง:

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