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()