😿

next/imageを使用すると、next-sitemapが使用できない件

2022/07/19に公開

Next.js

React

tech

タイトル通りの事象が起きましたので、忘れずにメモです。

前回の記述通りに作業を行なっていましたが、mergeしてbuildすると以下のエラーが・・・

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`.
  Read more: https://nextjs.org/docs/messages/export-image-api

なんだあこれえ・・

しかもnext/imageなんで使ってないのに・・・

どうやらmergeした先にあったらしく、これが原因っぽい。

現在、chakraUIを使用しているため、こちらは使用しなくても大丈夫なはず。

現場の先輩エンジニアさんが解決策を一緒に探してくれました。

結果

static exportは next/image 対応していない

ということがわかりました。

githubの記事がこちらです。

解消するには４つの方法

next/imageの代わりにimgを使い、.eslint.jsonを修正してNextJSのimg使用禁止ルールを抑制する。
すべてのImageタグにカスタムダミー() =>{} ローダーを追加する。
next.config.jsを変更し、画像の最適化を無効にする。
next-optimized-imagesのようなサードパーティパッケージを利用する（ステップ3も行わないと動作しません。）

(全部直訳です。)
コメントの方、ややおこ気味に書いていたのでしょうか・・

とにかくnext-sitemapとの相性は良くないようです。

自分が取った解決策は、前述したchakraUIのimageを使うことです。

これによりnext/imageは使わず回避できるので。

あまり同じ状況には遭わないとは思いますが、小ネタとして記述しました。

static exportは next/image 対応していない

Discussion