PageRouterで404ページをカスタムしたい場合は、pages/404.tsx(もしくはpages/404.jsx)を作成すればOKでした。
App Routerの場合は、app/not-found.tsx(もしくはnot-found.jsx)を作れば良いようです。
なので、AppRouterを使う場合でも404ページのカスタム自体は簡単です。
しかし、404ページのmetadateを変更しようとすると、若干の注意が必要でした。
なぜならば、 Static Metadata を使って、
// app/not-found.tsx export const metadata = { title: 'すごい404ページ' }; export default function NotFound() { return ( <h1>404</h1> ); }
とか、 Dynamic Metadata をつかって、
// app/not-found.tsx export default function NotFound() { return ( <h1>404</h1> ); } export async function generateMetadata() { return ({ title: 'すごい404ページ' }); }
というように、設定してもうまくいかないからです。
なんとかならないかと思い、調査してみると、GItHubでもいくつか、 issue が上がっていることがわかりました。
github.com
Add `app/` directory support for custom title in Error page · Issue #45620 · vercel/next.js · GitHub
コメントの中に、「JavaScriptからdocument.titleを変更すれば良いよ」とか「titleタグをリターンすれば良いよ」などのコメントがあり、試しにtitleタグのリターンを試してみたのですが、うまくいきました。
コードでいうと、
// app/not-found.tsx export default function NotFound() { return ( <> <title>すごい404ページ</title> <h1>404</h1> </> ); }
という感じです。
document.titleの変更だと、ソースコード上はtitleが変わらないので、こちらの方法を採用しました。
そんな調査結果をもとに制作したページがこちらです。
ソースコード上で変更できているので、404ページですが、本サイトとは違うOGPを設定できています。
はてなブログだとOGPが展開されませんが、FacebookだとしっかりOGPが展開されました。
以上、App Routerにおける404ページのmetadate編集の調査結果でした。