Next.js 如何使用 .env 文件？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Next.js 中，使用 .env 文件非常简单。你只需要在项目根目录下创建一个 .env 文件，并在其中定义环境变量。Next.js 会自动加载这些变量，并且你可以在代码中通过 process.env 来访问它们。

示例

在项目根目录下创建 .env 文件：

NEXT_PUBLIC_API_URL=https://api.example.com
SECRET_KEY=your-secret-key

在代码中使用这些环境变量：

// www.javascriptcn.com code example
// pages/index.js
export default function Home() {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
  const secretKey = process.env.SECRET_KEY;

  return (
    <div>
      <p>API URL: {apiUrl}</p>
      <p>Secret Key: {secretKey}</p>
    </div>
  );
}

注意事项

前缀 NEXT_PUBLIC_：如果你希望环境变量在客户端代码中可用，必须在变量名前加上 NEXT_PUBLIC_ 前缀。否则，这些变量只能在服务器端代码中访问。
安全性：不要在 .env 文件中存储敏感信息，除非你确信这些信息不会暴露在客户端代码中。

本题详细解读

1. `.env` 文件的作用

.env 文件用于存储环境变量，这些变量通常用于配置应用程序的行为。在 Next.js 中，环境变量可以用于区分开发环境和生产环境，或者存储 API 密钥、数据库连接字符串等敏感信息。

2. 环境变量的加载

Next.js 会自动加载 .env 文件中的环境变量，并将它们注入到 process.env 对象中。你可以在代码中通过 process.env.VARIABLE_NAME 来访问这些变量。

3. 客户端与服务器端的环境变量

客户端环境变量：如果你希望环境变量在客户端代码中可用，必须在变量名前加上 NEXT_PUBLIC_ 前缀。例如，NEXT_PUBLIC_API_URL 可以在客户端代码中访问。
服务器端环境变量：没有 NEXT_PUBLIC_ 前缀的变量只能在服务器端代码中访问。例如，SECRET_KEY 只能在服务器端代码中使用。

4. 环境变量的优先级

Next.js 支持多个 .env 文件，例如 .env.development 和 .env.production。这些文件会根据当前的环境自动加载。环境变量的优先级如下：

.env.local（本地开发环境）
.env.development 或 .env.production（根据当前环境）
.env

5. 安全性考虑

客户端暴露：任何带有 NEXT_PUBLIC_ 前缀的变量都会暴露在客户端代码中，因此不要在这些变量中存储敏感信息。
服务器端安全：没有 NEXT_PUBLIC_ 前缀的变量只在服务器端可用，因此可以用于存储敏感信息，如数据库密码或 API 密钥。

6. 示例代码

以下是一个完整的示例，展示了如何在 Next.js 中使用 .env 文件：

// www.javascriptcn.com code example
// .env
NEXT_PUBLIC_API_URL=https://api.example.com
SECRET_KEY=your-secret-key

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

  return (
    <div>
      <p>API URL: {apiUrl}</p>
      <p>Secret Key: {secretKey}</p>
    </div>
  );
}

在这个示例中，NEXT_PUBLIC_API_URL 可以在客户端和服务器端代码中访问，而 SECRET_KEY 只能在服务器端代码中访问。

Next.js 如何使用 .env 文件？