コンテンツへスキップ

not-found.js

not-foundファイルは、ルートセグメント内でnotFound関数がスローされたときにUIをレンダリングするために使用されます。カスタムUIの提供とともに、Next.jsはストリーム応答には200HTTPステータスコードを返し、非ストリーム応答には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.0not-foundが導入されました。