not-found.js
not-foundファイルは、ルートセグメント内でnotFound
関数がスローされたときにUIをレンダリングするために使用されます。カスタムUIの提供とともに、Next.jsはストリーム応答には200
HTTPステータスコードを返し、非ストリーム応答には404
を返します。
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>
)
}
リファレンス
Props
not-found.js
コンポーネントはどのPropsも受け入れません。
知っておくと良いこと: 予想される
notFound()
エラーをキャッチするだけでなく、ルートのapp/not-found.js
ファイルは、アプリケーション全体のどの不一致なURLも処理します。これは、アプリによって処理されないURLにアクセスしたユーザーには、app/not-found.js
ファイルによってエクスポートされたUIが表示されることを意味します。
例
データフェッチ
デフォルトでは、not-found
はServer Componentです。データをフェッチして表示するために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
のようなClient Componentフックを使用する必要がある場合、代わりにクライアントサイドでデータをフェッチする必要があります。
バージョン履歴
バージョン | 変更点 |
---|---|
v13.3.0 | ルートのapp/not-found がグローバルな不一致URLを処理するようになりました。 |
v13.0.0 | not-found が導入されました。 |
この情報は役に立ちましたか?