はじめに
Next.jsでビルド時にESLintの警告を無視するために NEXTJS_IGNORE_ESLINT=true
を使ったが、Next.js 15ではこの方法がうまく効かず、結果としてビルドが止まってしまうという事象に遭遇しました。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
最終的にはコード修正で対応し、無事に静的ファイル(out/)の生成に成功しました。
書こうと思ったきっかけ
以下のように、環境変数を使ってESLintを無視してビルドしようとしました:
NEXTJS_IGNORE_ESLINT=true npm run build
しかし実行結果は次の通り:
✓ Compiled successfully
Failed to compile.
./src/app/page.tsx
4:8 Error: 'Image' is defined but never used. @typescript-eslint/no-unused-vars
エラーの内容は Image
を import しているものの、実際には使用していないことに起因する @typescript-eslint/no-unused-vars
みたいでした。
解決手順
以下の1行を削除することで対応しました:
import Image from "next/image";
修正手順まとめ
- エディターで
src/app/page.tsx
を開く - 未使用の
import Image from "next/image";
を削除 - 保存して再ビルド:
npm run build
その結果、今度は out/
フォルダが正常に生成されました:
ls out/
_next 404.html favicon.ico globe.svg index.txt next.svg poem-auth vercel.svg
404 admin-register file.svg index.html login poem-admin register window.svg
まとめ
- Next.js 15では
NEXTJS_IGNORE_ESLINT=true
が効かないケースがある - ESLint警告でビルドが止まる場合は、未使用のimportを削除するのが最も確実
- 最終的に
out/
フォルダが生成されれば、S3などへの静的デプロイが可能になる
コード修正という小さな対応で、最終的なデプロイまで一気に進めることができたので、今後もESLint警告には早めに対処していきたいと感じたケースでした...!