はじめに

Next.jsでアプリケーションを本番ビルドし、S3へ静的ファイルをアップロードしようとした際、npm run build は成功したものの、npm run export が実行できないという問題に直面しました。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

ログには "Failed to compile." とも表示されましたが、実はビルド自体には問題がなかったことがわかりました。

書こうと思ったきっかけ

静的エクスポートを行う手順を試していたところ、以下のようなことが起きました。

> next-app@0.1.0 build
> next build

✓ Compiled successfully
Failed to compile.

./src/app/page.tsx
4:8  Error: 'Image' is defined but never used.  @typescript-eslint/no-unused-vars

この「Failed to compile.」という表記に一瞬戸惑いましたが、実際にはESLintによる警告（未使用のimport）だっただけで、アプリのビルドには支障がありませんでした。

その後、静的ファイル化しようと npm run export を叩いたところ、以下のエラーが発生しました。

npm error Missing script: "export"

これにより、静的出力を行う export スクリプトが package.json に定義されていないことに気づきました。

package.json

{
  "name": "next-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "export": "next export"
  },
  "dependencies": {
    "@headlessui/react": "^2.2.2",
    "next": "15.2.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.2.4",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

また、Next.jsのバージョンが15系だったため、npx next export は非推奨？（個人調べ）となっており、代わりに next.config.ts に output: "export" を設定して、通常の npm run build だけで静的ファイルを出力する流れへ移行していることもわかりました。

まとめ

npm run build の途中で表示される "Failed to compile" はESLint警告であり、実際にはビルド成功。
npm run export が使えないのは、package.json にスクリプトが登録されていないため。
ESLint警告は無視して進めても問題ないが、importの整理で後から解消できる。

今後も同様の構成を使う際には、静的エクスポートモードへの切り替え設定を忘れずに入れておくことが大切だと感じました...！