技术篇：Next.js 多环境配置

Next.js实战教程 - 系列文章

Part 10: 当前文章

Part 11: 技术篇：Google 统计服务

Part 12: 技术篇：构建与部署

学习目标：配置本地和线上环境

多环境配置是指为应用的不同运行环境（如开发、测试和生产）设置不同的参数和配置。通常来说，你可能会在开发环境使用本地服务和数据库，而在生产环境连接到远程服务和实际的数据库。这些差异通过环境变量管理，使得应用能够根据运行环境加载相应的配置。

在 Next.js 13 中管理环境变量 #

Next.js 13 使用 .env 文件来管理环境变量。环境变量是多环境配置的核心，通过定义这些变量，开发者可以轻松地在不同环境中切换配置。

使用 `.env` 文件 #

Next.js 默认支持 .env 文件，这些文件位于项目的根目录中，用于存储环境变量。Next.js 会根据运行环境自动加载相应的文件。

.env：默认环境配置，适用于所有环境。
.env.local：本地开发环境的配置，不会被 Git 提交。
.env.development：开发环境 (next dev)的配置。
.env.production：生产环境(next build 和 next start)的配置。

除了上面的环境还有一个测试环境，通常用于自动化测试场景，如使用 Jest、Cypress 或其他测试工具进行单元测试、集成测试或端到端测试。测试环境可以通过设置 NODE_ENV 为 test 来激活。

示例 .env 文件：

# .env
DATABASE_URL=mysql://root:123456@your_domain:3306/dram

示例 .env.local 文件：

DATABASE_URL=mysql://root:123456@localhost:3306/dram

加载优先级 #

Next.js 13 根据文件名的优先级加载环境变量：

.env.local
.env.[environment]
.env

例如，在开发环境下，.env.local 中的配置会覆盖 .env.development 和 .env 中的设置。如果.env.local没有对应的变量，才会加载.env.development 或 .env 中的设置

使用环境变量 #

在 Next.js 中，你可以通过 process.env 访问环境变量。例如：

export async function GET(request) {
  const user = { id: 1, name: "张三" };
  console.log(process.env.DATABASE_URL);
  console.log(process.env.NODE_ENV);
  return new Response(JSON.stringify(user));
}

环境变量的命名约定 #

为了确保环境变量的安全和正确使用，Next.js 规定了环境变量的命名约定：

公共环境变量：使用 NEXT_PUBLIC_ 前缀的环境变量会被暴露给客户端。因此，所有需要在浏览器中访问的变量都应以 NEXT_PUBLIC_ 开头。

示例：

NEXT_PUBLIC_API_URL=https://api.example.com

私有环境变量：未使用 NEXT_PUBLIC_ 前缀的环境变量仅在服务器端可用，用于存储如数据库连接字符串或 API 密钥等敏感信息。

示例：

DATABASE_URL=mysql://root:123456@localhost:3306/dram

在 Vercel 上配置多环境变量 #

Vercel 是 Next.js 官方推荐的托管平台，支持简便的环境变量管理。以下是如何在 Vercel 上配置多环境的步骤：

在 Vercel 控制台中设置环境变量 #

登录 Vercel 控制台，选择你的项目。
进入项目设置页面，找到 Environment Variables 选项。
在不同环境（Production、Preview、Development）下分别添加环境变量。

使用 Vercel 环境变量 #

在 Vercel 上设置的环境变量将自动应用于部署环境，你无需在代码中进行任何更改。Vercel 会在构建和运行时自动加载这些变量。

总结 #

Next.js 13 提供了一套强大且灵活的多环境配置管理工具，通过使用环境变量，开发者可以轻松地管理和切换不同环境下的配置。我们应避免在代码中硬编码环境相关的设置，使用环境变量管理不同环境的配置。同时确保公共和私有环境变量的分离，避免不必要的敏感信息暴露给客户端。始终使用 NEXT_PUBLIC_ 前缀来标识需要暴露的环境变量。无论是本地开发还是在 Vercel 等平台上进行部署，合理的多环境配置将大大提升应用的开发和维护效率。