跳到主要内容

Next.js 环境变量管理

介绍​

在开发 Next.js 应用程序时，环境变量是管理敏感信息和配置设置的关键工具。它们允许你在不同的环境（如开发、测试和生产）中使用不同的值，而无需更改代码。本文将详细介绍如何在 Next.js 中管理环境变量，并提供实际案例来帮助你理解其应用。

环境变量的基本概念​

环境变量是存储在操作系统中的键值对，可以在应用程序运行时访问。它们通常用于存储敏感信息（如 API 密钥、数据库连接字符串）或配置设置（如调试模式、日志级别）。

在 Next.js 中，环境变量可以通过 .env 文件或直接在操作系统中设置。Next.js 会自动加载 .env 文件中的变量，并将其注入到应用程序中。

在 Next.js 中使用环境变量​

1. 创建 .env 文件​

首先，在你的项目根目录下创建一个 .env 文件。这个文件将包含你的环境变量。

plaintext
NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgres://user:password@localhost:5432/mydb

2. 访问环境变量​

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

javascript
// pages/index.js
export default function Home() {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL;

  return (
    <div>
      <h1>API URL: {apiUrl}</h1>
    </div>
  );
}
备注

注意：以 NEXT_PUBLIC_ 为前缀的环境变量会被 Next.js 自动注入到客户端代码中。如果你不希望某个变量暴露给客户端，请不要使用这个前缀。

3. 环境变量的作用域​

Next.js 支持多种环境变量文件，以适应不同的环境：

  • .env：默认环境变量文件，适用于所有环境。
  • .env.development：仅适用于开发环境。
  • .env.production：仅适用于生产环境。
  • .env.test：仅适用于测试环境。

例如，你可以在 .env.development 文件中设置开发环境特定的变量：

plaintext
NEXT_PUBLIC_API_URL=https://dev.api.example.com

4. 在 API 路由中使用环境变量​

你可以在 Next.js 的 API 路由中使用环境变量。例如：

javascript
// pages/api/data.js
export default function handler(req, res) {
  const dbUrl = process.env.DATABASE_URL;

  // 使用 dbUrl 连接数据库
  res.status(200).json({ message: 'Database URL: ' + dbUrl });
}

实际案例​

假设你正在开发一个电子商务网站，需要连接到不同的支付网关。你可以在 .env 文件中设置支付网关的 API 密钥：

plaintext
PAYMENT_GATEWAY_API_KEY=your_api_key_here

然后在你的支付处理代码中使用这个变量：

javascript
// pages/api/payment.js
export default function handler(req, res) {
  const apiKey = process.env.PAYMENT_GATEWAY_API_KEY;

  // 使用 apiKey 调用支付网关 API
  res.status(200).json({ message: 'Payment processed with API key: ' + apiKey });
}

总结​

环境变量是 Next.js 应用程序中管理配置和敏感信息的重要工具。通过合理使用 .env 文件和 process.env 对象，你可以确保应用程序在不同环境中的灵活性和安全性。

提示

提示：始终确保将 .env 文件添加到 .gitignore 中，以防止敏感信息泄露。

附加资源​

练习​

  1. 在你的 Next.js 项目中创建一个 .env 文件，并设置一个名为 NEXT_PUBLIC_BASE_URL 的环境变量。
  2. 在页面组件中访问并显示这个变量的值。
  3. 创建一个 API 路由，使用环境变量连接到模拟的数据库，并返回连接状态。

通过完成这些练习，你将更好地理解如何在 Next.js 中管理环境变量。