NextJS 不讀取環境變量

Question

我有一個運行 Next.js v12.2.5 的 NextJS 應用程序，但它似乎沒有讀取環境變量。

我創建了一個.env.local文件，其中包含：

NEXT_PUBLIC_SERVER_URL=http://localhost:3001

我的 next.config.js 是：

/** @type {import('next').NextConfig} */
const withTM = require('next-transpile-modules')(['react-daisyui'])
module.exports = withTM({
    reactStrictMode: true,
    swcMinify: true,
    images: {
        domains: ['placeimg.com'],
    },
    env: {
        NEXT_PUBLIC_SERVER_URL: process.env.NEXT_PUBLIC_SERVER_URL,
    },
})

在我的組件的 index.tsx 文件之一中，我正在執行以下操作：

const apiURL = process.env.NEXT_PUBLIC_SERVER_URL

console.log(process.env.NEXT_PUBLIC_SERVER_URL)
console.log(apiURL)

在服務器上，一旦我執行npm run dev和 go 到 Chrome 上的路由，我的日志語句將得到以下信息：

undefined
undefined

在瀏覽器上我得到：

trips:1          GET http://localhost:3000/trips 404 (Not Found)

請注意，我的 NextJS 位於http://localhost:3000上，而我嘗試連接的 Express 后端位於http://localhost:3001

為什么 NextJS 不讀取我設置的環境變量？

Answer 1

你可以試試，dotenv。 記得安裝 package 'npm i dotenv --save'

然后在您的 src 文件夾中創建一個 .env 文件並輸入如下信息

db=POSTGRES

id=艾倫

密碼=峽灣

完成此操作后，您將可以通過執行以下操作來訪問信息

常量 id = process.env.id

順便說一句.. 將 dotenv 導入您正在使用的文件尚未完成 import * from 'dotenv' < 這很糟糕

應該像這樣導入 require('dotenv').config()