Next.js の generateMetadata 内で notFound を実行するとルートの not-found.tsx を参照する
掲題のとおりなのですが、ドキュメントについても記載されていなかったためメモです。
バージョンについて
Next.js 13.4.1 で確認しています。
$ pnpm why next
Legend: production dependency, optional only, dev only
...
dependencies:
next 13.4.1
generateMetadata とは
<meta> タグの記述を動的に（あるいは非同期処理を用いながら）設定するための関数です。Next.js の App Router で機能します。
わかりやすい使用例としては、CMSなどから投稿データを取得してきて、それを <title> タグに挿入するときなどです。
type Props = {
params: {
id: string
}
}
export async function generateMetadata({
params: { id },
}: Props): Promise<Metadata> {
const post = await fetchPost(id)
return {
title: post.title,
description: post.description,
}
}
export default async function PostDetailPage({ params: { id } }: Props) {
// ...
}
詳しくは公式ドキュメントへ↓
notFound とは
こちらも Next.js の App Router で追加されたもので、いわゆる 404 Not Found ページを呼び出すための関数です。
使い方としては単純に実行するだけです。
type Props = {
params: {
id: string
}
}
export default async function PostDetailPage({ params: { id } }: Props) {
const post = await fetchPost(id)
if (!post) {
// return は不要。返し値は never 型となっている。
notFound()
}
return <div>{post.content}</div>
}
詳しくは公式ドキュメントへ↓
なにがおこったか
このサイトを App Router に移行するときに not-found.tsx をつくってみたときに、以下のような構造で全体の Not Found ページと投稿の Not Found ページを別々のファイルとしてつくっていました。
app/
not-found.tsx // ページ全体でパスの不一致で出す用
layout.tsx
page.tsx
post/
[uid]/
not-found.tsx // 投稿の uid がなかったときに表示する用
page.tsx
app/not-found.tsx は↓
const NotFound = () => {
return (
<html>
<head>
<title>Page Not Found.</title>
<meta name="description" content="Page Not Found." />
</head>
<body>
<h1>Page Not Found.</h1>
<a href="/">Home</a>
</body>
</html>
)
}
export default NotFound
app/post/[uid]/not-found.tsx は↓
const UidNotFound = () => {
return (
<html>
<head>
<title>Uid Not Found.</title>
<meta name="description" content="Uid Not Found." />
</head>
<body>
<h1>Uid Not Found.</h1>
<a href="/">Home</a>
</body>
</html>
)
}
export default UidNotFound
この状態で、 app/post/[uid]/page.tsx で notFound へ飛ばす処理を書いてみました。
type Props = {
params: {
id: string
}
}
export async function generateMetadata({ params: { id } }: Props) {
const postMetadata = await fetchPostMetadata(id).catch((err) => {
console.error(err)
// 1. 投稿メタデータが取得できない = 存在しないとみなして 404 ページへ
notFound()
})
if (!postMetadata) {
// 2. 投稿メタデータがないため 404 ページへ
notFound()
}
const metadata: Metadata = {
title: postMetadata.title,
description: postMetadata.description,
}
return metadata
}
export default async function PostDetailPage({ params: { id } }: Props) {
const post = await fetchPost(id).catch((err) => {
console.error(err)
// 3. 投稿データが取得できない = 存在しないとみなして 404 ページへ
notFound()
})
if (!post) {
// 4. 投稿データがないため 404 ページへ
notFound()
}
return <div>{post.content}</div>
}
この状態で、 generateMetadata 内の notFound （1と2）が実行されたときには、 「Page Not Found.」が表示されます。
つまり、 app/not-found.tsx がレンダリングされました。
回避策
app/post/[uid]/not-found.tsx を表示するために、今回は notFound を generateMetadata で実行しないように変更しました。
投稿データがないケースと投稿メタデータがないケースはほとんど一致するので、今回はこれで回避するという形をとりました。
fetchPostMetadata の catch は、エラーログの出力のみに変更しました。
後日談
Next.js リポジトリ上でも notFound の issue は割と上がっていたので、他にも色々あるかもしれないです。