这个envs只在服务器端工作。要在客户端访问这个envs，需要在next.config.js中声明
这样的话：

module.exports = {
  reactStrictMode: true,
  env: {
    BASE_URL: process.env.BASE_URL,
  }
}

1.创建**.env（所有环境）、.env.development**（开发环境）和**.env.production**（生产环境）。
1.将前缀NEXT_PUBLIC添加到所有环境变量中。
NEXT_PUBLIC_API_URL=http：//localhost：3000/
1.与前缀process.env一起使用
process.env.NEXT_PUBLIC_API_URL
1.停止服务器并重新启动：
npm运行开发
1.我希望它能起作用。这个解决方案的最新版本的nextJs（以上9）

重新启动服务器对我很有用。
1.编辑并保存.env.local
1.停止服务器并重新启动，npm run dev
1.你应该在下一行得到如下输出：

> klout@0.1.0 dev
> next dev

Loaded env from [path]/.env.local

对于那些使用NextJS +9并在浏览器中查找环境变量的用户，您应该使用NEXT_PUBLIC_前缀。示例：

NEXT_PUBLIC_ANALYTICS_ID=123456789

参考文档。

在花了无数个小时之后，我发现在nextjs 9.4的pre和post文档中都有一个很小的段落：

• （9.4之前）https://nextjs.org/docs/api-reference/next.config.js/environment-variables（与this answer相同）

Next.js将在构建时将process.env.customKey替换为'my-value'。

• （^9.4）https://nextjs.org/docs/basic-features/environment-variables

为了保证仅服务器机密的安全，Next.js在构建时将process.env.* 替换为正确的值。
关键字为BUILD TIME。这意味着您必须在运行next build时设置这些变量，而不是（仅）在next start时设置这些变量，以便客户端访问这些变量。

这是我的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

在我的例子中，我粘贴REACT_APP_API_URL而不是NEXT_PUBLIC_API_URL。

在此基础上添加最新版本的documentation，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;

对于视频参考codegrepper链接https://www.grepper.com/answers/564562/process.env+in+nextjs?ucard=1
进程.env只能在服务器上工作，不能在浏览器上工作，所以它将显示undefined以修复它使用NEXT_PUBLIC_before API key in .env.local or .env这个解决方案只能从版本9的nextjs工作。

NEXT_PUBLIC_BACKEND_API=“http：//localhost：1337/graphql”

像MongoURl和openAi密钥这样的秘密环境不应该使用Next_PUBLIC_，否则它会暴露给浏览器，每个人都可以使用它。

MONGO_URL=
OPENAI_API_KEY=