我正在使用 Next.js 编写一个网站，并尝试添加谷歌标签管理器。
我按照 Next.js Github 示例上的教程进行操作，但由于某些原因我无法访问我的环境变量。
它说我的变量未定义。
我在项目文件夹中创建了一个文件 .env.local （与组件、node_modules、页面等处于同一级别）
在这个文件中，我创建了一个像这样的变量（测试目的）：
NEXT_PUBLIC_DB_HOST=localhost
在我的索引页上我尝试了这段代码：
console.log("test ", process.env.NEXT_PUBLIC_DB_HOST);
但是在我的控制台中我得到一个“测试未定义”。
我尝试将变量放入 .env 文件中，但没有成功。
我做错了什么？
此环境仅适用于服务器端。要在客户端访问此环境，您需要在 next.config.js 中声明
这样：
module.exports = {
reactStrictMode: true,
env: {
BASE_URL: process.env.BASE_URL,
}
}
创建.env（所有环境）、.env.development（开发环境）和.env.product（生产环境）。
将前缀 NEXT_PUBLIC 添加到所有环境变量中。
NEXT_PUBLIC_API_URL=http://localhost:3000/
process.env.NEXT_PUBLIC_API_URL
npm 运行开发
对于那些使用 NextJS +9 并在浏览器中查找环境变量的人，您应该使用
NEXT_PUBLIC_NEXT_PUBLIC_ANALYTICS_ID=123456789
请参阅参考文档。
重新启动服务器对我有用。
npm run dev> k[email protected] dev
> next dev
Loaded env from [path]/.env.local
在花费了无数时间之后，我发现在 nextjs 9.4 的前后文档中都有一个小段落：
Next.js 将在构建时将 process.env.customKey 替换为“my-value”。
为了确保仅服务器机密的安全，Next.js 在构建时用正确的值替换了 process.env.*。
关键词是构建时间。这意味着您必须在运行
next buildnext start视频参考代码grepper链接 https://youtu.be/6qhF9l_AgAk
process.env 只能在服务器中工作，不能在浏览器中工作，所以它会显示未定义 要修复它，请在 .env.local 或 .env 中使用 NEXT_PUBLIC_before APi 密钥 该解决方案仅适用于 nextjs 版本 9。
NEXT_PUBLIC_BACKEND_API =“http://localhost:1337/graphql”
像 MongoURl 和 openAi 密钥这样的秘密环境不应该使用 Next_PUBLIC_ 否则它将暴露给浏览器并且每个人都可以使用它。
MONGO_URL=
OPENAI_API_KEY=
这是我的 next.config.js 文件。
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
env: {
BASE_URL: process.env.NEXT_PUBLIC_SITE_URL,
},
};
module.exports = nextConfig;
重新启动服务器，一切正常。将 Nextjs 12.1.0 与 typescript 一起使用
添加最新版本的文档，v12+。
使用 next.config.js 文件，您可以指定服务器和客户端变量：
module.exports = {
serverRuntimeConfig: {
// Will only be available on the server side
mySecret: 'secret',
secondSecret: process.env.SECOND_SECRET, // Pass through env variables
},
publicRuntimeConfig: {
// Will be available on both server and client
staticFolder: '/static',
},
}
您仍然可以使用 env.local 文件，并将变量传递到 next.config.js 文件。例如：
publicRuntimeConfig: {
DB_URL: process.env.DB_URL
}
然后你可以像这样访问变量：
import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
publicRuntimeConfig.DB_URL;
就我而言，我粘贴 REACT_APP_API_URL 而不是 NEXT_PUBLIC_API_URL。
检查您的 .Env 文件：
确保您已在其中定义了周围环境变量 适当的 .Env 文件。在 Next.Js 中，您可以使用 one-of-a-kind 用于特殊环境的 .Env 文件（例如，.Env.Local 用于 邻里开发和制造业的环境生产）。 确保您要访问的变量已定义 在正确的 .Env 文件中。
重新启动您的开发服务器：
添加或增强环境变量后，确保重新启动 您的开发服务器。有时，环境的改变 变量要重启服务器才会生效。
使用process.env访问环境变量：
在 Next.js 中，您可以使用 process.env 访问环境变量。为了 例子： const myVar = process.env.MY_VARIABLE;