コンテンツへスキップ

not-found.js

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

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

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

プロパティ

not-found.jsコンポーネントは、プロパティを受け入れません。

データフェッチ

デフォルトでは、not-foundはサーバーコンポーネントです。データをフェッチして表示するには、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などのクライアントコンポーネントフックを使用する必要がある場合は、代わりにクライアントサイドでデータをフェッチする必要があります。

バージョン履歴

バージョン変更点
v13.3.0ルートapp/not-foundがグローバルな未対応URLを処理します。
v13.0.0not-foundが導入されました。