not-found.js
not-found ファイルは、ルートセグメント内でnotFound
関数がスローされたときにUIをレンダリングするために使用されます。カスタムUIを提供するだけでなく、Next.jsはストリーミングされたレスポンスには200
HTTPステータスコード、ストリーミングされていないレスポンスには404
を返します。
app/not-found.tsx
TypeScript
import Link from 'next/link'
export default function NotFound() {
return (
<div>
<h2>Not Found</h2>
<p>Could not find requested resource</p>
<Link href="/">Return Home</Link>
</div>
)
}
リファレンス
プロパティ
not-found.js
コンポーネントはプロパティを受け取りません。
補足: 予期される
notFound()
エラーをキャッチするだけでなく、ルートのapp/not-found.js
ファイルはアプリケーション全体で一致しないURLも処理します。つまり、アプリケーションで処理されないURLにユーザーがアクセスすると、app/not-found.js
ファイルによってエクスポートされたUIが表示されます。
例
データの取得
デフォルトでは、not-found
はServerComponentです。async
としてマークすることで、データを取得して表示できます:
app/not-found.tsx
TypeScript
import Link from 'next/link'
import { headers } from 'next/headers'
export default async function NotFound() {
const headersList = await headers()
const domain = headersList.get('host')
const data = await getSiteData(domain)
return (
<div>
<h2>Not Found: {data.name}</h2>
<p>リクエストされたリソースが見つかりませんでした</p>
<p>
<Link href="/blog">すべての投稿</Link>を表示
</p>
</div>
)
}
usePathname
のようなクライアントコンポーネントのフックを使用してパスに基づいたコンテンツを表示する必要がある場合は、代わりにクライアント側でデータをフェッチする必要があります。
バージョン履歴
バージョン | 変更点 |
---|---|
v13.3.0 | ルートのapp/not-found がグローバルの一致しないURLを処理。 |
v13.0.0 | not-found が導入。 |