メインコンテンツまでスキップ

not-found.js

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

app/blog/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>
  )
}

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

Props​

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

データ・フェッチ​

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

app/blog/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>
  )
}

Version 履歴​

VersionChanges
v13.3.0ルートのapp/not-foundで一致しない URL をグローバルにハンドルするようになりました。
v13.0.0not-found 導入