【Next.js】SSGでビルドするとメタタグのドメインがlocalhostになってしまう

経緯

Next.jsで作っているこのブログにmetaタグを設定した際に以下のようにOGPを設定しているのですが、実際にビルドをするとimagesのurlがlocalhostから始まるようになってしまっていました

  openGraph: {
    url: process.env.DOMAIN,
    images: [
      {
        url: "/takolog.png",
        width: 1200,
        height: 630,
      },
    ],
  },

環境

• Next.js 15.1.7

対策

layout.tsxなどでmetadataを設定しているところにmetadataBaseを追加することでドメインの指定の修正することで改善できました

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL(process.env.DOMAIN!), // 追加
};

vercelにデプロイする場合は環境変数に

参考リンク

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase