SELF_HOSTNAMEについて

next.config.ts で process.env.SELF_HOSTNAME を images.remotePatterns に直接使っており、デプロイしないと見られない SELF_HOSTNAME が必須だったのでオプショナルにする

// 元の設定
// hostname: process.env.SELF_HOSTNAME!,

// オプショナル化
...(process.env.SELF_HOSTNAME ? [{
  protocol: 'https' as const,
  hostname: process.env.SELF_HOSTNAME,
  pathname: '/**',
}] : []),

必要な環境変数

• MICROCMS_SERVICE_DOMAIN:xxxxx（.microcms.io は含めない）
• MICROCMS_API_KEY :microCMS管理画面 > サービス設定 > APIキー
• SELF_HOSTNAME :hoge.vercel.app（https:// なし）

メモ

• vercelプロジェクト作成しなおした
• ./app/をrootに指定していたが、デフォルトに直した
• SELF_HOSTNAME はデプロイ前に仮でも設定しておくか、コードで optional にする
• Vercelのビルドが速い（15秒以下）場合はキャッシュを疑う
• キャッシュが原因のときはプロジェクト再作成が確実