静的な画像を使いたくなったら、基本はnext-imagesを使っておけば良い。https://github.com/zeit/next-plugins でも紹介されている。
このライブラリはNext.jsを使う時のwebpackのfile-loaderの推奨設定を書いてくれているだけの薄いライブラリ。file-loaderを使っているので、画像を使いたいところではimportして使うと良い。詳しい使い方はnext-imagesのドキュメントを参照のこと。
実装は非常に薄いので、もし静的画像の配信周りでチューニングしたければ中身を拝借して自分好みに変えると良いだろう。
production環境での配信
next-imagesを使うことで、静的画像も配信できるようになる。しかしproduction環境ではNodeのプロセスから画像を配信せず、S3に静的ファイルを配置し、CloudFrontを経由して配信したくなるだろう。その場合はS3にファイルを配置した上で、フルCDNアーキテクチャやCDNのドメインを分けるアーキテクチャなどのアーキテクチャに応じて配信方法を変えると良い。
S3に静的ファイルをアップロードする
next buildすると.next/以下に成果物が作成される。特に静的ファイルは.next/static/以下に生成されている。この成果物はURLとしては /_next/static/ 以下から配信されている。
- 例1) /_next/static/mxB2bTmDn1q4LbLd4s4qP/pages/index.js
- 例2) /_next/static/images/image1-2ae516abfafa31abf108c359ca581b8c.jpg
そのため、.next/以下のファイルをS3に配置しておくと良い。もしかしたら.next/static/以下だけで良いかもしれないが、生成されている成果物のそれぞれのディレクトリごとの役割が把握しきれていないので、一旦全部アップロードしておく。
フルCDNアーキテクチャパターンでの配信
動的なページも含めて全て一度CDN(CloudFrontなど)を通る設計となっているなら、URLのpathベースでS3にルーティングしたら良い。すなわちCloudFrontなどで
- /_next/配下へのリクエストならS3をオリジンとする
- それ以外ならNext.jsが動くNodeプロセスをオリジンとする
CDNのドメインが、アプリケーションのドメインと別の場合での配信
例えばCDNのドメインが cdn.example.com で、アプリケーションのドメインが example.comの場合、静的ファイルのURLのドメインはCDNのドメインにする必要がある。この場合は、assetPrefixを設定することで対応できる。
