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

주소 표시줄에 슬롯에 대해 지정되지 않은 URL이 입력되었을 때 동적 슬롯이 404 오류를 발생시키는지 확인하세요.

404 오류 문제를 해결하세요.