Tệp mặc định của slot trong NextJS

Trong bài học trước, chúng ta đã tạo một slot động với tên 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>
	);
}

Tuy nhiên, có một vấn đề. Vấn đề là slot của chúng ta chỉ hoạt động cho hai loại địa chỉ: /users và /posts. Nếu nhập vào thanh địa chỉ một địa chỉ khác, mà slot của chúng ta không được xác định, thì NextJS sẽ trả về lỗi 404.

Để giải quyết vấn đề, cần đặt trực tiếp vào thư mục chứa slot một tệp đặc biệt default.jsx. Trong tệp này phải có một component, sẽ được hiển thị khi một URL không được xác định cho slot của chúng ta được nhập vào thanh địa chỉ.

Như vậy, trong trường hợp của chúng ta sẽ có cấu trúc tệp như sau:

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

Hãy đảm bảo rằng slot động trả về lỗi 404 khi một URL không được xác định cho slot của chúng ta được nhập vào thanh địa chỉ.

Hãy sửa lỗi 404.