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

起初報錯內容如下所示：NCB28資訊網——每日最新資訊28at.com

圖片NCB28資訊網——每日最新資訊28at.com

一開始關注點在下面這行：NCB28資訊網——每日最新資訊28at.com

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

看到這個報錯以為只是 useContext Hook 的使用問題，看了代碼后也沒看出什么問題并且在同事的電腦試過了沒有此問題，這就很難辦了！NCB28資訊網——每日最新資訊28at.com

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

之后，注意到控制臺有以下警告信息。NCB28資訊網——每日最新資訊28at.com

圖片NCB28資訊網——每日最新資訊28at.com

根據提示看了下詳細內容，注意到了下面標注的這句話，大概意思是如果未設置標準的 NODE_ENV 環境變量可能會導致依賴關系出現意外行為。NCB28資訊網——每日最新資訊28at.com

圖片NCB28資訊網——每日最新資訊28at.com

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

嘗試修改命令為 NODE_ENV=production next build，結果成功了。但這種神奇的構建問題，對用戶體驗是真的不夠好。NCB28資訊網——每日最新資訊28at.com

下面對 Next.js 環境變量的一些規則做個總結NCB28資訊網——每日最新資訊28at.com

在 Next.js 中，執行 next dev 命令時需要確保 NODE_ENV 為 development。執行 next start和 next build 命令時需要確保 NODE_ENV 為 production。NCB28資訊網——每日最新資訊28at.com

按照 Next.js 官網給的建議，在我們的代碼倉庫最好有三個文件：NCB28資訊網——每日最新資訊28at.com

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

注意環境變量的加載順序，Next.js 按以下順序查找環境變量，一旦找到變量就停止。NCB28資訊網——每日最新資訊28at.com

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

關于環境變量更多內容參考 Next.js 文檔 ?https://nextjs.org/docs/app/building-your-application/configuring/environment-variablesNCB28資訊網——每日最新資訊28at.com

NCB28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-22484-0.html被 Next.js 的環境變量給坑了一把...

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 如何構建最小和最大堆

下一篇： 關于四種獲取當前執行方法名稱方案的基準測試報告