Next.js（13.4）のApp Routerで404ページをカスタムしつつタイトルなどのmetadataを変更する 4️⃣

PageRouterで404ページをカスタムしたい場合は、pages/404.tsx（もしくはpages/404.jsx）を作成すればOKでした。

nextjs.org

App Routerの場合は、app/not-found.tsx（もしくはnot-found.jsx）を作れば良いようです。

nextjs.org

なので、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ページ'
  });
}

というように、設定してもうまくいかないからです。

nextjs.org

なんとかならないかと思い、調査してみると、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が変わらないので、こちらの方法を採用しました。

そんな調査結果をもとに制作したページがこちらです。

https://kimizuka.fm/404/

ソースコード上で変更できているので、404ページですが、本サイトとは違うOGPを設定できています。
はてなブログだとOGPが展開されませんが、FacebookだとしっかりOGPが展開されました。

以上、App Routerにおける404ページのmetadate編集の調査結果でした。