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

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

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

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