not-found.js

not-found ファイルは、route segment 内で notFound 関数が発生したときに UI をレンダリングするために使用されます。カスタム UI の提供に加えて、Next.js はストリームレスポンスには 200 HTTP ステータスコードを返し、ストリームされないレスポンスには 404 を返します。

TypeScript

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

JavaScript

app/blog/not-found.js

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

Good to know: 予期される notFound() エラーをキャッチすることに加えて、root の app/not-found.js ファイルは、アプリケーション全体の一致しない URL も処理します。これは、アプリが処理しない URL にアクセスしたユーザーに対して、app/not-found.js ファイルでエクスポートされた UI が表示されることを意味します。

Props

not-found.js コンポーネントは、いかなる prop も受け取りません。

データフェッチング

デフォルトでは、not-found は Server Component です。データを取得して表示するために async としてマークすることができます：

TypeScript

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

JavaScript

app/not-found.jsx

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	Root app/not-found がアプリ全体の一致しない URL を処理します。
v13.0.0	not-found が導入されました。