在 Next.js 项目中，可以通过以下步骤配置自动加载 .env 文件中的环境变量：

### 步骤 1：创建 .env 文件

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


SITE_URL=https://example.com
API_KEY=your-api-key


### 步骤 2：在 Next.js 中自动加载环境变量

Next.js 会自动加载位于项目根目录的 .env 文件中的环境变量。你只需要确保文件的命名正确，Next.js 支持以下几种环境变量文件：

- .env - 默认加载的环境变量文件
- .env.local - 本地环境变量文件，用于覆盖 .env 文件中的变量，仅在本地使用，不应提交到版本控制系统
- .env.development - 仅在开发环境中加载的环境变量文件
- .env.development.local - 本地开发环境变量文件，用于覆盖 .env.development 文件中的变量
- .env.production - 仅在生产环境中加载的环境变量文件
- .env.production.local - 本地生产环境变量文件，用于覆盖 .env.production 文件中的变量

### 步骤 3：在代码中使用环境变量

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


// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Site URL: {process.env.SITE_URL}</h1>
      <p>API Key: {process.env.API_KEY}</p>
    </div>
  );
}


### 环境变量前缀

出于安全考虑，Next.js 只会自动将以 NEXT_PUBLIC_ 前缀开头的环境变量暴露给客户端（浏览器端）。例如：


NEXT_PUBLIC_API_URL=https://api.example.com


在代码中使用：


// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>API URL: {process.env.NEXT_PUBLIC_API_URL}</h1>
    </div>
  );
}


### 总结

通过上述步骤，你可以在 Next.js 项目中配置和使用环境变量。Next.js 会自动加载根目录中的 .env 文件，并根据环境加载相应的文件。在代码中，通过 process.env 访问这些变量，记住客户端访问的变量需要加上 NEXT_PUBLIC_ 前缀。
 
 
Back to Top