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

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

export 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

ตรวจสอบให้แน่ใจว่าสล็อตไดนามิก แสดงข้อผิดพลาด 404 เมื่อ ป้อน URL ที่ไม่ได้กำหนดไว้สำหรับสล็อตของเรา เข้าไปในแถบที่อยู่

แก้ไขปัญหาข้อผิดพลาด 404