【解決】Next.jsをVercelにデプロイするとサイトが表示できなくなる

概要

ローカルでは、yarn buildした場合には全く問題なく動くのに、Vercelにデプロイした場合にはコンソールに5000件以上のエラーが出る。なんでや

いつおきるのか

Vercelにデプロイした場合に、アプリケーションにアクセスするとコンソールに多くのエラーが出る。
ただし /api/hello にアクセスした場合には、問題なく表示されるため、ビルドには成功していると考えられる。

• デプロイしたときでもビルド時にはエラーは発生しない
• ローカル(vercel dev / yarn build / yarn start)が可能

動作についてはこちら：

https://www.notion.so/monocraft/75aadc06113348b59d40cc51acd498e9#3b7a3a20bbcc40a98ec388e394576b40

• dependencies

  "dependencies": {
    "dayjs": "^1.9.4",
    "firebase": "^7.24.0",
    "lodash": "^4.17.20",
    "next": "^10.0.0",
    "next-localization": "^0.9.3",
    "react": "17.0.0",
    "react-dom": "17.0.0",
    "react-infinite-scroll-component": "^5.1.0",
    "react-markdown": "^5.0.2",
    "react-modal": "^3.11.2",
    "react-select": "^3.1.0",
    "recoil": "^0.1.2"
  },
  "devDependencies": {
    "@types/node": "^14.14.2",
    "@types/react": "^16.9.53",
    "babel-plugin-inline-react-svg": "^1.1.1",
    "node-sass": "^4.14.1",
    "styled-jsx-plugin-sass": "^1.0.0",
    "typescript": "^4.0.3"
  }
  

1 Recoil削除

該当するコードと依存関係をすべて削除してみた

→解消されず

2 Firebaseの処理書き直し

→Firebase Adminつかって処理書きますか...

Going Serverless with Next.js and Firebase

→だめでした😭😭😭😭😭

3 yarn.lock再生成

→ダメでした

4 プロジェクト作り直し→移植→デプロイ

→ダメでした

[現在📌] 5 コードの書き方に問題？

ドツボにはまっています😔😔

🎉🎉解決しました!

yarn create next-app で作成したアプリをそのままデプロイしたところ、同様なエラーが発生したため、Next.jsのissuesを確認したところ、このような投稿が

https://github.com/vercel/next.js/issues/19001

JSX transformを使用し、環境変数を NODE_ENV=development と指定している場合、
TypeError: Object(...) is not a function
と、同じエラーが発生しているようです。

今回は、Nuxt.jsからNext.jsへリプレイスしていたため、ブランチで分け、Vercelでは、ステージング環境に対して、環境変数を指定していました。

環境変数"NODE_ENV"を削除することで、正常にアプリが動作するようになりました🎉🎉🎉
よかったー！！

スクラップに助言いただいた、catnoseさん、Genbuchanさん、ありがとうございました😆😆