Sponsor
ChatHubChatHub Use GPT-4, Gemini, Claude 3.5 and more chatbots side-by-side
ここをクリック
Menu

not-found.js

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

app/not-found.tsx
TypeScript
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>
  )
}

リファレンス

プロパティ

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

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

データの取得

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

app/not-found.tsx
TypeScript
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>リクエストされたリソースが見つかりませんでした</p>
      <p>
        <Link href="/blog">すべての投稿</Link>を表示
      </p>
    </div>
  )
}

usePathnameのようなクライアントコンポーネントのフックを使用してパスに基づいたコンテンツを表示する必要がある場合は、代わりにクライアント側でデータをフェッチする必要があります。

バージョン履歴

バージョン変更点
v13.3.0ルートのapp/not-foundがグローバルの一致しないURLを処理。
v13.0.0not-foundが導入。