NextJSで静的サイト生成(SSG)時、アクセス先フォルダにindexファイルを生成したい

原因

今回の原因は、SSGに対応していない要素がpage/配下で実行されていることでした。
それが、NextJSで画像最適化を行う場合に利用されるnext/imageです。

今回、SSGビルドをおこうなために、next.config.jsに以下の設定を行なって、ビルドを行なった際に以下のエラーメッセージが表示された。

module.exports = {
  trailingSlash: true
}

Error: Image Optimization using Next.js' default loader is not compatible with `next export`.
  Possible solutions:
    - Use `next start` to run a server, which includes the Image Optimization API.
    - Use any provider which supports Image Optimization (like Vercel).
    - Configure a third-party loader in `next.config.js`.
    - Use the `loader` prop for `next/image`.

解決策

メッセージによると、画像最適化は、next export静的サイト生成に対応していないということでした。

画像を<img>に置き換えてビルドし直すことで解消しました。

参考

みねゆうじ

ESLint v8が実行エラーを起こす

$ yarn lint
...
error - ESLint must be installed: yarn add --dev eslint

v7系にダウングレードして対応

みねゆうじ

NextJS AWSホスティングする際に必要な設定周り

SSGをcloudFront + s3 環境にホスティングするために必要な設定がいくつかある。

みねゆうじ

https://fwywd.com/tech/husky-setup

みねゆうじ

環境別のビルドに対応していない

やりたいこと

開発環境、ステージング環境、本番環境下でそれぞれのenvファイルを参照して、ビルドを行いたい。

解決策

みねゆうじ