404（Not Found）ページ

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

動的ルートは、寛容すぎるという欠点があります。app/menu/[slug]/page.jsx は /menu/pizza に一致し、/menu/asdfgh にも同じように問題なく一致して、存在しない dish の 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()は値を返さないため、これを返すこともありません。これを呼び出すとその場でページの処理が停止し、最も近いnot-found.jsxが表示されます。if以降では、dishが実在すると安全に仮定できます。そのため、ガードは先頭に置きます。

チャレンジ

中級

/menu/sushi は現在、メニューにない料理の料理ページを表示しています。この抜け穴をふさいでください。

ファイル app/not-found.jsx を完成させてください。<h1> を返すコンポーネントをデフォルトエクスポートし、その id="not-found-title" と完全に一致するテキスト Dish not found を設定してください。
app/menu/[slug]/page.jsx で、next/navigation から notFound をインポートしてください。
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>
    );
}