not-found.js
**not-found**ファイルは、ルートセグメント内でnotFound
関数がスローされた場合にUIをレンダリングするために使用されます。カスタムUIを提供することに加えて、Next.jsはストリーミングされたレスポンスには200
、ストリーミングされていないレスポンスには404
のHTTPステータスコードを返します。
app/not-found.tsx
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>
)
}
重要な点: 予期された
notFound()
エラーをキャッチすることに加えて、ルートapp/not-found.js
ファイルは、アプリケーション全体の未対応のURLも処理します。つまり、アプリで処理されないURLにアクセスするユーザーには、app/not-found.js
ファイルによってエクスポートされたUIが表示されます。
プロパティ
not-found.js
コンポーネントは、プロパティを受け入れません。
データフェッチ
デフォルトでは、not-found
はサーバーコンポーネントです。データをフェッチして表示するには、async
としてマークできます。
app/not-found.tsx
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>Could not find requested resource</p>
<p>
View <Link href="/blog">all posts</Link>
</p>
</div>
)
}
パスに基づいてコンテンツを表示するためにusePathname
などのクライアントコンポーネントフックを使用する必要がある場合は、代わりにクライアントサイドでデータをフェッチする必要があります。
バージョン履歴
バージョン | 変更点 |
---|---|
v13.3.0 | ルートapp/not-found がグローバルな未対応URLを処理します。 |
v13.0.0 | not-found が導入されました。 |
役に立ちましたか?