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

起初報(bào)錯(cuò)內(nèi)容如下所示：

圖片

一開(kāi)始關(guān)注點(diǎn)在下面這行：

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

看到這個(gè)報(bào)錯(cuò)以為只是 useContext Hook 的使用問(wèn)題，看了代碼后也沒(méi)看出什么問(wèn)題并且在同事的電腦試過(guò)了沒(méi)有此問(wèn)題，這就很難辦了！

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

之后，注意到控制臺(tái)有以下警告信息。

圖片

根據(jù)提示看了下詳細(xì)內(nèi)容，注意到了下面標(biāo)注的這句話，大概意思是如果未設(shè)置標(biāo)準(zhǔn)的 NODE_ENV 環(huán)境變量可能會(huì)導(dǎo)致依賴關(guān)系出現(xiàn)意外行為。

圖片

這個(gè) “意外行為” 就很難講了，說(shuō)不定真和上面的報(bào)錯(cuò)有關(guān)系，在執(zhí)行 next build 時(shí)，打印了 NODE_ENV 環(huán)境變量發(fā)現(xiàn)被修改為了 development。在代碼層面我是沒(méi)有設(shè)置的，后來(lái)查了下本機(jī)的 ~/.zshrc 文件，發(fā)現(xiàn)這里設(shè)置了 NODE_ENV 環(huán)境變量為 development，才導(dǎo)致的 next build 時(shí)環(huán)境變量取值繼承了本機(jī)設(shè)置的環(huán)境變量。

嘗試修改命令為 NODE_ENV=production next build，結(jié)果成功了。但這種神奇的構(gòu)建問(wèn)題，對(duì)用戶體驗(yàn)是真的不夠好。

下面對(duì) Next.js 環(huán)境變量的一些規(guī)則做個(gè)總結(jié)

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

按照 Next.js 官網(wǎng)給的建議，在我們的代碼倉(cāng)庫(kù)最好有三個(gè)文件：

• .env（所有環(huán)境）
• .env.development（開(kāi)發(fā)環(huán)境）
• .env.production（生產(chǎn)環(huán)境）

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

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

關(guān)于環(huán)境變量更多內(nèi)容參考 Next.js 文檔 ?https://nextjs.org/docs/app/building-your-application/configuring/environment-variables