Lang x Lang

notFound

notFound関数により、not-found fileを route セグメント内に render するとともに、<meta name="robots" content="noindex" /> タグを注入することができます。

notFound()

notFound()関数を呼び出すと、NEXT_NOT_FOUND error が発生し、それがスローされた route セクメントの rendering が終了します。not-foundファイルを指定することで、そのセグメント内の Not Found UI を rendering することで、このようなエラーをうまく処理することができます。

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 user = await fetchUser(params.id)

  if (!user) {
    notFound()
  }

  // ...
}

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

Version History

VersionChanges
v13.0.0notFound が導入されました。

当社サイトでは、Cookie を使用しています。各規約をご確認の上ご利用ください:
Cookie Policy, Privacy Policy および Terms of Use