notFound

notFound 関数は、ルートセグメント内で not-found ファイル をレンダリングし、<meta name="robots" content="noindex" /> タグを挿入することを可能にします。

notFound()

notFound() 関数を呼び出すと、NEXT_HTTP_ERROR_FALLBACK;404 エラーがスローされ、それがスローされたルートセグメントのレンダリングが終了します。 not-found ファイル を指定することで、セグメント内でNot Found UIをレンダリングし、このようなエラーを優雅に処理することができます。

app/user/[id]/page.js

import { notFound } from 'next/navigation'

async function fetchUser(id) {
  const res = await fetch('https://...')
  if (!res.ok) return undefined
  return res.json()
}

export default async function Profile({ params }) {
  const { id } = await params
  const user = await fetchUser(id)

  if (!user) {
    notFound()
  }

  // ...
}

Good to know: notFound() は、TypeScriptのnever型を使用しているため、return notFound() を使用する必要はありません。

バージョン履歴

Version	Changes
'v13.0.0'	'notFound' introduced.