not-found.js
not-found ファイルは、ルートセグメント内で notFound
関数がスローされたときに UI をレンダリングするために使用されます。カスタム UI を提供するだけでなく、Next.js はストリーミングレスポンスに対して 200
HTTP ステータスコードを、非ストリーミングレスポンスに対して 404
を返します。
リファレンス
Props
not-found.js
コンポーネントは props を受け取りません。
豆知識: 予期される
notFound()
エラーをキャッチするだけでなく、ルートのapp/not-found.js
ファイルはアプリケーション全体でマッチしない URL も処理します。つまり、アプリで処理されない URL にアクセスしたユーザーには、app/not-found.js
ファイルからエクスポートされた UI が表示されます。
使用例
データ取得
デフォルトでは、not-found
はサーバーコンポーネントです。async
としてマークすることでデータを取得して表示できます:
パスに基づいてコンテンツを表示するために usePathname
のようなクライアントコンポーネントのフックを使用する必要がある場合は、代わりにクライアントサイドでデータを取得する必要があります。
バージョン履歴
バージョン | 変更内容 |
---|---|
v13.3.0 | ルート app/not-found がグローバルな未マッチ URL を処理するようになりました。 |
v13.0.0 | not-found が導入されました。 |