not-found.js

not-found ファイルは、ルートセグメント内で notFound 関数がスローされたときに UI をレンダリングするために使用されます。カスタム UI を提供するだけでなく、Next.js はストリーミングレスポンスに対して 200 HTTP ステータスコードを、非ストリーミングレスポンスに対して 404 を返します。

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>
  )
}

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 が表示されます。

Props

not-found.js コンポーネントは props を受け取りません。

データフェッチング

デフォルトでは、not-found はサーバーコンポーネント (Server Component) です。async をマークしてデータを取得し表示できます:

import Link from 'next/link'
import { headers } from 'next/headers'

export default async function NotFound() {
  const headersList = 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>
  )
}

import Link from 'next/link'
import { headers } from 'next/headers'

export default async function NotFound() {
  const headersList = 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` が導入されました。

Props

データフェッチング

バージョン履歴

On this page