Open6

NextJS開発で困ったことメモ

みねゆうじみねゆうじ

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>に置き換えてビルドし直すことで解消しました。

参考

https://nextjs.org/docs/api-reference/next.config.js/trailing-slash
https://qiita.com/toshikisugiyama/items/9d9ada2de0cedb03a21e

みねゆうじみねゆうじ

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

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

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