Next.js下通过env分环境控制功能开关

了解 .env.local 和 .env.prod

在 Next.js 中，.env.prod 和 .env.local 是两个不同的环境变量配置文件。

.env.prod 是用于生产环境的全局配置文件。其中定义的环境变量将在生产环境中生效。

当 Next.js 应用在开发环境下运行时，.env.local 文件中定义的环境变量将会覆盖 .env.prod 文件中相同名称的环境变量。这样可以轻松地在本地开发中修改某些特定的环境变量值，而不会影响到生产环境中的配置。

因此，在 Next.js 中，你可以使用 .env.prod 文件配置生产环境的全局环境变量，通过 .env.local 文件灵活地调整本地开发环境中的特定环境变量。

在不同环境声明变量

以 NEXT_PUBLIC_ 前缀声明的环境变量将在构建时被静态地注入到客户端代码中。这样，当你在客户端代码（比如在 React 组件中）使用 process.env.VARIABLE_NAME 时，其值将会自动传递到客户端，并在浏览器中被访问到。

.env.local

# 插件开关
NEXT_PUBLIC_SWITCH_PLUGIN=true

# 模型开关
NEXT_PUBLIC_SWITCH_MODLE=true

.env.prod

# 插件开关
NEXT_PUBLIC_SWITCH_PLUGIN=false

# 大模型开关
NEXT_PUBLIC_SWITCH_MODLE=false

在入口文件定义并在组件内使用

return {
    switchPlugin: process.env.NEXT_PUBLIC_SWITCH_PLUGIN === "true",
    switchModel: process.env.NEXT_PUBLIC_SWITCH_MODLE === "true",
}

测试

如何在本地开发环境下去测试生产环境的效果呢？

安装dotenv

npm i dotenv

在package.json添加 dotenv -e .env.prod

"scripts": {
    "dev:dev": "API_URL=http://xxx.com dotenv -e .env.prod node server.js",
  }

大功告成^^
ps：server.js是处理跨域的文件