︙

not-found.js

not-found ファイルは、notFound 関数が route セグメント内でスローされた時、UI を render するために使用されます。カスタム UI を提供するとともに、Next.js は、ストリーム化された応答に対しては 200 の HTTP ステータス code を、ストリーム化されていない応答に対しては 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>
  )
}

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() error の捕捉に加えて、 root app/not-found.js ファイルは、アプリケーション全体に対する一致しない app も処理します。つまり、ユーザーがアプリが処理していない URL を訪れると、app/not-found.js ファイルでエクスポートされた UI が表示されます。

Props

not-found.js Component は、どんな props も受け入れません。

Data Fetching

default によると、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 = 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>
  )
}

app/not-found.jsx

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 フックを使って path に基づいた内容を display する必要がある場合、クライアント側でデータを fetch する必要があります。

Version History

Version	Changes
`v13.3.0`	Root はグローバルに一致しない URL を処理する `app/not-found` 。
`v13.0.0`	`not-found` 導入されました。