Next.js 如何配置 env？

推荐答案

在 Next.js 中，配置环境变量（env）非常简单。你可以通过以下步骤来配置：

1. 创建 .env 文件：在项目的根目录下创建一个 .env 文件。
2. 定义环境变量：在 .env 文件中定义你的环境变量。例如：

   NEXT_PUBLIC_API_URL=https://api.example.com
   SECRET_KEY=your_secret_key

3. 访问环境变量：在代码中通过 process.env 访问这些环境变量。例如：

   const apiUrl = process.env.NEXT_PUBLIC_API_URL;
   const secretKey = process.env.SECRET_KEY;

注意：以 NEXT_PUBLIC_ 为前缀的环境变量会在客户端代码中暴露，因此不要将敏感信息放在这些变量中。

本题详细解读

1. 环境变量的作用域

Next.js 中的环境变量分为两种作用域：

• 客户端环境变量：以 NEXT_PUBLIC_ 为前缀的环境变量可以在客户端代码中访问。这些变量会被编译到客户端 JavaScript 中，因此不应该包含敏感信息。
• 服务器端环境变量：不以 NEXT_PUBLIC_ 为前缀的环境变量只能在服务器端代码中访问。这些变量不会暴露给客户端，适合存储敏感信息。

2. 环境变量的加载顺序

Next.js 会按照以下顺序加载环境变量：

1. .env.local：本地开发环境变量，优先级最高。
2. .env.development 或 .env.production：根据当前环境（开发或生产）加载的环境变量。
3. .env：通用环境变量，优先级最低。

3. 环境变量的使用场景

• 开发环境：在开发环境中，你可以使用 .env.development 文件来定义开发专用的环境变量。
• 生产环境：在生产环境中，使用 .env.production 文件来定义生产专用的环境变量。
• 本地开发：在本地开发时，可以使用 .env.local 文件来覆盖其他环境变量文件中的配置。

4. 环境变量的安全性

• 敏感信息：不要在客户端环境变量中存储敏感信息，如 API 密钥、数据库密码等。
• 版本控制：.env 文件通常不应该提交到版本控制系统中（如 Git），以防止敏感信息泄露。可以通过 .gitignore 文件来忽略 .env 文件。

5. 环境变量的动态加载

Next.js 还支持在运行时动态加载环境变量。你可以通过 getStaticProps 或 getServerSideProps 来动态获取环境变量，并将其传递给页面组件。

export async function getStaticProps() {
  const apiUrl = process.env.API_URL;
  return {
    props: {
      apiUrl,
    },
  };
}

通过这种方式，你可以在构建时或运行时动态地使用环境变量。