404（Not Found）ページ

CoddyのReactジャーニー「Next.js の基本」セクションの一部 — レッスン 9/47。

動的ルートはどこまでも寛容です。 app/menu/[slug]/page.jsx は /menu/pizza に一致し、/menu/asdfgh にもまったく同じように一致してしまうため、存在しない dish のページをレンダリングしてしまいます。

Next.jsは、この修正の両方の側面を提供します。

1. 404 画面。 not-found.jsx という名前のファイルで、page.jsx や layout.jsx と同じ特別なファイル名の仲間です:

// app/not-found.jsx
export default function NotFound() {
    return <h1>We don't have that</h1>;
}

これを app/not-found.jsx に配置すると、アプリ全体をカバーします。どの URL にも一致しないすべてのアクセスは、シンプルな組み込みの 404 ではなく、ここにランディングします。

2. トリガー。 URLがルートにマッチしても、データが存在しない場合があります。これが /menu/asdfgh のケースであり、これの判断はコードのみが行えます。notFound() を呼び出します:

import { notFound } from 'next/navigation';

const dishes = ['pizza', 'pasta'];

export default async function Dish({ params }) {
    const { slug } = await params;

    if (!dishes.includes(slug)) {
        notFound();
    }

    return <h1>{slug}</h1>;
}

notFound() は値を返しませんし、return する必要もありません。呼び出すとその場でページの処理が停止し、最も近い not-found.jsx が表示されます。ガードを先頭に配置しているため、if 以降のすべての処理では、dish が確実に存在するものとして安全に扱うことができます。

チャレンジ

中級

/menu/sushi は現在、メニューにない料理の料理ページをレンダリングしています。この問題を解決してください。

app/not-found.jsx を作成します。id="not-found-title" と正確なテキスト Dish not found を持つ <h1> を返すコンポーネントを default エクスポート（export）してください。
app/menu/[slug]/page.jsx で、next/navigation から notFound を import します。
slug が dishes 配列に含まれていない場合、何もレンダリングする前に notFound() を呼び出してください。

/menu/pizza は引き続き機能する必要があります。

自分で試してみよう

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}