Zenn
✅

RenderでNext.jsアプリをデプロイするときにハマったエラーと対処法

に公開
Next.js
deploy
render
tech

結論から

以下のYAMLを設定することで、無事デプロイできました。

render.yaml
services:
  - type: web
    name: next-app
    runtime: node
    plan: free
    buildCommand: NODE_ENV=development npm install --no-package-lock; npm run build
    startCommand: npm run start
    autoDeploy: true
    envVars:
      - key: NODE_ENV
        value: production

前提

実行済みの設定・コマンド

  • npx create-next-app@latestを実行し、対話式の質問はデフォルトのままNext.jsのアプリをセットアップ。
  • RenderとGitHubのリポジトリは連携済み

環境

  • MacBook Air (M3)

エラーの内容

エラー①｜Cannot find module '@tailwindcss/postcss'というエラーが出る

起きていたエラー

設定

render.yaml
services:
  - type: web
    name: next-app
    runtime: node
    plan: free
    buildCommand: npm install; npm run build
    startCommand: npm run start
    autoDeploy: true
    envVars:
      - key: NODE_ENV
        value: production
ビルドログ
   ▲ Next.js 15.3.2
   Creating an optimized production build ...
Failed to compile.
src/app/layout.tsx
An error occurred in `next/font`.
Error: Cannot find module '@tailwindcss/postcss'

原因: 当該モジュールがdevDependenciesとしてのみ包含されている

デフォルトでは、package.jsonは次のようになっていました。

package.json
{
  "name": "liff-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.3.2"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.3.2",
    "@eslint/eslintrc": "^3"
  }
}

ご覧の通り、"@tailwindcss/postcss"はdevDependenciesとしてのみ包含されています。
しかし、render.yamlにはNODE_ENVとしてproductionが設定されているため、そのままではdevDependenciesがインストールされません。

参考
https://github.com/vercel/next.js/discussions/67607

対策: buildCommand:に NODE_ENV=development npm installを設定

次のように設定することで、npm install実行時にはdevDependenciesも含めてインストールされるようになります。

buildCommand: NODE_ENV=development npm install

参考

So I keep the NODE_ENV=development during npm im then I switch to NODE_ENV=production for building and everything worked like a charm :)
https://github.com/vercel/next.js/discussions/67607#discussioncomment-10002134

エラー②｜Error: Cannot find module '../lightningcss.linux-x64-gnu.node'が出る

起きていたエラー

設定

render.yaml
services:
  - type: web
    name: next-app
    runtime: node
    plan: free
    buildCommand: NODE_ENV=development npm install; npm run build
    startCommand: npm run start
    autoDeploy: true
    envVars:
      - key: NODE_ENV
        value: production
ビルドログ
src/app/layout.tsx
An error occurred in `next/font`.
Error: Cannot find module '../lightningcss.linux-x64-gnu.node'
Require

原因: Renderのビルド環境とローカル開発環境との違い

このエラーは、lightningcssが事前にビルド済みのネイティブバイナリを読み込もうとした際に、適切なバイナリがnode_modules内に存在しないために発生します。

これは主に以下のような場合に発生します：

  • package-lock.jsonが古い、または開発環境とは異なるプラットフォームで生成されたものである
  • npm ciやnpm install時に不適切な環境変数やキャッシュの影響で、必要なネイティブバイナリが取得されなかった

実際、lightningcssのissue #567でも同様の問題が報告されています。

対策: --no-package-lockを追加

次のように設定することで、npm install実行時にはpackage-lock.jsonを無視してインストールされるようになります。

buildCommand: NODE_ENV=development npm install --no-package-lock

参考
https://github.com/parcel-bundler/lightningcss/issues/567#issuecomment-1685295558

まとめ

Next.jsアプリをRenderにデプロイする際、私の場合は以下の2点を修正する必要がありました。

  1. devDependenciesが必要な場合は、NODE_ENV=developmentを指定してインストールする
  2. 環境依存のネイティブモジュール（例: lightningcss）がある場合は、--no-package-lockを使ってクリーンに依存関係を構築する

最終的には以下のようなbuildCommandを設定することで、Render上でも正常にビルド・デプロイできるようになりました：

buildCommand: NODE_ENV=development npm install --no-package-lock; npm run build

似たような症状に悩んでいる方の参考になれば幸いです。

Discussion