not-found.js

not-foundファイルは、ルートセグメント内で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>
  )
}

リファレンス

Props

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

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

例

データフェッチング

デフォルトでは、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が導入されました。