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
Version | Changes |
---|---|
v13.0.0 | notFound が導入されました。 |