เลย์เอาท์แบบซ้อนใน NextJS

ดังที่คุณทราบ ในโฟลเดอร์ /app ในไฟล์ /layout.jsx จะมีเลย์เอาท์หลักของเว็บไซต์

หากต้องการ อย่างไรก็ตาม ในโฟลเดอร์ย่อย สามารถสร้างเลย์เอาท์ของตัวเองได้ ในกรณีนี้ เนื้อหาของเพจจะ ถูกแทรกเข้าไปในเลย์เอาท์ย่อยก่อน จากนั้นผลลัพธ์ที่ได้จะถูกแทรกเข้าไปในเลย์เอาท์หลัก

มาลองทำในทางปฏิบัติกัน สมมติว่าเลย์เอาท์หลักของเรามี ลักษณะดังนี้:

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

มาสร้างเลย์เอาท์ย่อยอีกอันหนึ่ง สำหรับเนื้อหาทั้งหมดจากโฟลเดอร์ /users กัน:

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

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

มาสร้างไฟล์สำหรับแสดงเนื้อหาของผู้ใช้กัน:

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

หลังจากดำเนินการเหล่านี้ โครงสร้างไฟล์ของเรา จะมีลักษณะดังนี้:

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

ตอนนี้ หากเข้าถึง URL ที่เกี่ยวข้อง NextJS จะประกอบทุกอย่างเข้าด้วยกัน และในเบราว์เซอร์ เราจะได้โค้ด HTML สุดท้ายดังนี้:

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>