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という 2種類のアドレスに対してのみ動作します。もしアドレスバーにスロットが定義されていない他のアドレスを入力すると、 NextJSは404エラーを返します。

この問題を解決するには、スロットのフォルダ内に直接特別なファイルdefault.jsxを配置します。このファイルには、アドレスバーに入力されたURLが私たちのスロットに対して設定されていないときに表示されるコンポーネントを含める必要があります。

つまり、私たちのケースでは次のようなファイル構造になります:

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

ダイナミックスロットが、アドレスバーに入力されたURLがスロットに対して設定されていない場合に 404エラーを返すことを確認してください。

404エラーの問題を修正してください。