最近在使用 Next.js 時遇到了一個問題，最后原因竟是 .env 取值問題，為這個問題花費了數小時的時間，希望看到這篇文章的朋友，如果遇到類似問題，不要重蹈覆轍吧。

起初報錯內容如下所示：

圖片

一開始關注點在下面這行：

Generating static pages (0/10)  [==  ] ? TypeError: Cannot read properties of null (reading 'useContext')

看到這個報錯以為只是 useContext Hook 的使用問題，看了代碼后也沒看出什么問題并且在同事的電腦試過了沒有此問題，這就很難辦了！

懷疑是否是版本問題，升級到最新的 V14.0.1 還是沒能解決。之后在 Next.js Issue 下搜索相關關鍵詞，確實找到了類似的提問，例如：?issues#57277、?issues#52478、?discussions#43577，截止目前沒看到好的解決辦法，還在討論這個問題。

之后，注意到控制臺有以下警告信息。

圖片

根據提示看了下詳細內容，注意到了下面標注的這句話，大概意思是如果未設置標準的 NODE_ENV 環境變量可能會導致依賴關系出現意外行為。

圖片

這個 “意外行為” 就很難講了，說不定真和上面的報錯有關系，在執行 next build 時，打印了 NODE_ENV 環境變量發現被修改為了 development。在代碼層面我是沒有設置的，后來查了下本機的 ~/.zshrc 文件，發現這里設置了 NODE_ENV 環境變量為 development，才導致的 next build 時環境變量取值繼承了本機設置的環境變量。

嘗試修改命令為 NODE_ENV=production next build，結果成功了。但這種神奇的構建問題，對用戶體驗是真的不夠好。

下面對 Next.js 環境變量的一些規則做個總結

在 Next.js 中，執行 next dev 命令時需要確保 NODE_ENV 為 development。執行 next start和 next build 命令時需要確保 NODE_ENV 為 production。

按照 Next.js 官網給的建議，在我們的代碼倉庫最好有三個文件：

• .env（所有環境）
• .env.development（開發環境）
• .env.production（生產環境）

注意環境變量的加載順序，Next.js 按以下順序查找環境變量，一旦找到變量就停止。

• process.env
• .env.$(NODE_ENV).local
• .env.local
• .env.$(NODE_ENV)
• .env

關于環境變量更多內容參考 Next.js 文檔 ?https://nextjs.org/docs/app/building-your-application/configuring/environment-variables