notFound

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

`notFound()`

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

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()
  }
 
  // ...
}

知っておくと良いこと: TypeScript の never 型を使用するため、notFound() では return notFound() を使用する必要はありません。

バージョン履歴

バージョン	変更履歴
`v13.0.0`	`notFound` が導入されました。

役に立ちましたか？