😿
next/imageを使用すると、next-sitemapが使用できない件
タイトル通りの事象が起きましたので、忘れずにメモです。
前回の記述通りに作業を行なっていましたが、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の記事がこちらです。
解消するには4つの方法
- next/imageの代わりにimgを使い、.eslint.jsonを修正してNextJSのimg使用禁止ルールを抑制する。
- すべてのImageタグにカスタムダミー() =>{} ローダーを追加する。
- next.config.jsを変更し、画像の最適化を無効にする。
- next-optimized-imagesのようなサードパーティパッケージを利用する(ステップ3も行わないと動作しません。)
(全部直訳です。)
コメントの方、ややおこ気味に書いていたのでしょうか・・
とにかくnext-sitemapとの相性は良くないようです。
自分が取った解決策は、前述したchakraUIのimageを使うことです。
これによりnext/imageは使わず回避できるので。
あまり同じ状況には遭わないとは思いますが、小ネタとして記述しました。
Discussion