Next.js と外部 API で作成した静的サイトをデプロイしようとしたら、画像最適化を考えて結局 Vercel にデプロイした

TL;DR

• ローカルのリポジトリに入っていない、外部の API から取得した画像の最適化をどうするか
• 結局、 Vercel なら外部 URL の画像も最適化して高速で配信できるので Vercel を選択した

経由

Next.jsの getStaticProps と getStaticPaths を使ったStatic Generationの素振りをするために作成しました。

• 作ったもの
  • https://nextjs-demo-spacex-crew.vercel.app/
• リポジトリ
  • https://github.com/ryokryok/nextjs-demo-spacex-crew

悩んだ末に結局 Vercel デプロイ

最初は Vercel にロックインはしたくないと思い、 next export で静的に書き出して firebase や Netlify にアップしようとしたしたのですが、 next export を使用する時は next/image が基本的に使えません。

なので、<img> タグで置き換えようかと思ったのですが、結局下記の理由で Vercel にロックインしてもいいので Vercel にデプロイすることにしました。

• 今回のように外部 API を利用する場合はビルド時に画像を最適化するのは難しい
• せっかく Next.js で高速な静的サイトを作成するのに、画像の表示がネックになるのは意味がないのでは?
• Vercel のドキュメントを読んだら、外部 URL の画像も最適化して配信されることが判明
  • https://vercel.com/docs/concepts/next.js/image-optimization#edge-network-optimization
• Vercel にデプロイするなら、 next export しないので next/image がそのまま使えて楽

Next.js は Vercel が作っているから親和性がいいのだろうと思っていましたが、真面目に考えると悩ましい画像の最適化・配信も担ってくれるので本当にありがたいです。

外部の API に含まれている画像 URL を next/image で使用する時の注意点

• 表示する URL のドメインを調べて next.config.js に追記しておく必要があります。
• もし画像のアップロード先のドメインが複数ある場合はそれらを列挙する必要があります。
• もしドメインがない場合はエラーが出るので next.config.js に追記して dev server を再起動してください。

公式ドキュメント

https://nextjs.org/docs/api-reference/next/image#domains

今回、自分の場合は下記のように書きました。

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['imgur.com', 'i.imgur.com', 'images2.imgbox.com'],
  },
}