Parallel Routing ใน NextJS

ใน NextJS สามารถทําให้ ส่วนหนึ่งของเว็บไซต์แสดงเนื้อหาที่ต่างกัน ขึ้นอยู่กับ URL ที่ร้องขอ นี้เรียกว่า Parallel Routing

ลองดูตัวอย่าง สมมติว่าเรามี Layout ของเว็บไซต์ดังต่อไปนี้:

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

สมมติว่าเราต้องการให้ในส่วน header แสดงข้อมูลแบบไดนามิก สมมติว่าเมื่อ URL เป็น /users จะแสดง คอมโพเนนต์เกี่ยวกับผู้ใช้ และเมื่อ URL /posts เป็นคอมโพเนนต์เกี่ยวกับโพสต์

สำหรับ Parallel Routing แบบนี้ จำเป็นต้องสร้างโฟลเดอร์พิเศษ โดยเริ่มชื่อด้วยสัญลักษณ์ @ สำหรับตัวอย่างนี้เราจะตั้งชื่อโฟลเดอร์ของเราเป็น @info

ในโฟลเดอร์นี้ เราจะวางสองคอมโพเนนต์ อันแรกสำหรับแสดงผู้ใช้ในโฟลเดอร์ /users/ และอันที่สองสำหรับแสดงโพสต์ในโฟลเดอร์ /posts/ โครงสร้างไฟล์ของเราจะได้ดังนี้:

• /app//@info//users/page.jsx/posts/page.jsx

ตอนนี้ใน Layout ของเว็บไซต์ เราต้องเขียนคำสั่งพิเศษ สำหรับการแทรก สำหรับสิ่งนี้จำเป็นต้อง ใช้ Dynamic Slot

เพื่อให้เข้าใจว่ามันคืออะไร ก่อนอื่นให้ดู ที่พารามิเตอร์ของฟังก์ชัน Layout ของเรา:

app/layout.jsxexport default function RootLayout({children}) {
  return (
    
  );
}

โปรดสังเกตว่าพารามิเตอร์ ที่ส่งเข้ามาเป็นออบเจ็กต์ ซึ่ง เราแยกเนื้อหาของเว็บไซต์ออกมาเก็บในตัวแปร children

ในออบเจ็กต์นี้อาจมีคีย์อื่นๆ ได้ คีย์เหล่านี้สอดคล้องกับโฟลเดอร์ที่ ชื่อของเราเริ่มต้นด้วย @

ในกรณีของเรามีโฟลเดอร์ @info นั่นหมายความว่าเราจะสามารถเข้าถึง ตัวแปร info ได้ ซึ่งขึ้นอยู่ กับ URL จะมีเนื้อหาของหนึ่งใน คอมโพเนนต์ - ผู้ใช้หรือโพสต์ เราจะรับตัวแปรนี้:

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    
  );
}

ตอนนี้ภายในโครงสร้าง Markup ของ Layout เราสามารถ แสดงตัวแปร info ในตำแหน่งนี้ ขึ้นอยู่กับ URL ข้อความของคอมโพเนนต์หนึ่งในสองของเราจะถูกแทรกเข้ามา:

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