Next.js项目环境变量配置

时间：2024-10-28 07:32:05

Next.js官方文档

Next.js 具有对将环境变量从 .env* 文件加载到 process.env 的内置支持。

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

1. 创建环境变量文件

在项目根目录下创建以下文件来存储不同环境的环境变量：

  • .env.local：本地开发环境变量，不应该提交到版本控制。
  • .env.development：开发环境变量。
  • .env.test：测试环境变量。
  • .env.production：生产环境变量。

这些文件应该以键值对的形式存储环境变量，例如：

.env.development

DB_HOST=localhost
DB_USER=myuser
DB_PASS=mypassword

.env.production

DB_HOST=prod.example.com
DB_USER=produser
DB_PASS=prodpassword

2. 使用环境变量

在 Next.js 应用程序中，您可以通过 process.env 访问这些变量：

const dbHost = process.env.DB_HOST;
const dbUser = process.env.DB_USER;
const dbPass = process.env.DB_PASS;

// 使用这些变量来配置数据库连接或其他配置

3. 设置 NODE_ENV

确保在构建和启动应用程序时正确设置了 NODE_ENV 环境变量。您可以在 package.json 的脚本中设置它（一般来说不需要）：

package.json

{
  "scripts": {
    "dev": "NODE_ENV=development next dev",
    "build": "NODE_ENV=production next build",
    "start": "NODE_ENV=production next start"
  }
}

4. 默认环境变量

一般情况下只需要一个 .env.local 文件。但是，有时您可能想为 development ( next dev ) 或 production ( next start ) 环境添加一些默认值。

Next.js 允许您在 .env （所有环境）、 .env.development （开发环境）和 .env.production （生产环境）中设置默认值。

.env.local 始终会覆盖默认设置。

5.环境变量加载顺序

按顺序在以下位置查找环境变量，一旦找到变量就停止。

  1. process.env
  2. .env.$(NODE_ENV).local
  3. .env.local （当 NODE_ENV 为 test 时不检查。）
  4. .env.$(NODE_ENV)
  5. .env

例如，如果 NODE_ENV 是 development 并且您在 .env.development.local 和 .env 中定义了一个变量，则将使用 .env.development.local 中的值。

值得注意的是： NODE_ENV 的允许值为 production 、 development 和 test 。

注意事项

  • .env.local 文件不应该提交到版本控制系统中，因为它可能包含敏感信息。确保它在 .gitignore 文件中被忽略。
  • 环境变量名必须以 NEXT_PUBLIC_ 开头才能在客户端代码中使用，否则它们将只能在服务器端代码中使用。
  • 对于生产环境，您可能需要使用环境变量管理服务或服务器配置来设置环境变量，而不是在代码库中。
  • 如果你只是想在服务器端代码中使用环境变量，或者你使用的是带有 NEXT_PUBLIC_ 前缀的环境变量，那么你不需要在 next.config.js 中添加 env 配置。但是，如果你需要在客户端代码中使用非 NEXT_PUBLIC_ 前缀的环境变量，那么你需要在 next.config.js 中显式地声明它们

相关文章