ไฟล์สล็อตเริ่มต้นใน NextJS

ในบทเรียนที่แล้ว เราสร้าง สล็อตไดนามิกชื่อ info ขึ้นมา:

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>
  );
}

อย่างไรก็ตาม มีปัญหาอยู่ นั่นคือ สล็อตของเราทำงาน ได้เฉพาะกับที่อยู่สองประเภทเท่านั้น: /users และ /posts หากป้อนที่อยู่อื่น ที่ไม่ได้กำหนดไว้สำหรับสล็อตของเรา เข้าไปในแถบที่อยู่ NextJS จะแสดงข้อผิดพลาด 404

เพื่อแก้ปัญหานี้ ควรวางไฟล์พิเศษชื่อ default.jsx ลงในโฟลเดอร์ของสล็อตโดยตรง ไฟล์นี้ควรประกอบด้วยคอมโพเนนต์ ที่จะแสดงเมื่อ ป้อน URL ที่ไม่ได้กำหนดไว้สำหรับสล็อตของเรา เข้าไปในแถบที่อยู่

ดังนั้นในกรณีของเรา จะได้ โครงสร้างไฟล์ดังต่อไปนี้:

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