NextJS 如何向前端环境公开环境变量

在Next.js中，向前端环境公开环境变量的方法是使用特别的环境变量前缀 NEXT_PUBLIC_。通过这种方式，我们可以确保只有以 NEXT_PUBLIC_ 开头的环境变量会被打包进前端代码中。这是Next.js的一个安全措施，以避免在客户端代码中不小心泄露敏感信息。

步骤：

1. 创建环境变量: 在你的项目根目录下，你可以创建 .env.local 文件来存储本地开发时的环境变量。例如，如果你想公开一个API的URL给前端，你可以这么做：

   plaintext
   NEXT_PUBLIC_API_URL=https://api.yoursite.com

   这里，NEXT_PUBLIC_API_URL 是环境变量的名称，它以 NEXT_PUBLIC_ 开头，这意味着它将被公开到前端代码中。

2. 在代码中使用环境变量: 你可以在任何前端代码（如React组件）中直接使用这些环境变量，像这样：

   javascript
   function Component() {
     return (
       <div>
         <p>API URL: {process.env.NEXT_PUBLIC_API_URL}</p>
       </div>
     );
   }

   这里，process.env.NEXT_PUBLIC_API_URL 将会被替换成实际的环境变量值。

示例：

假设我们正在开发一个显示天气信息的应用，并且需要从一个公开的API获取数据。我们可以这样设置环境变量和使用它：

.env.local

plaintext
NEXT_PUBLIC_WEATHER_API_URL=https://api.weatherapi.com/v1/current.json

WeatherComponent.js

javascript
import React from 'react';

function WeatherComponent() {
  const fetchData = async () => {
    const response = await fetch(`${process.env.NEXT_PUBLIC_WEATHER_API_URL}?key=your_api_key&query=London`);
    const data = await response.json();
    console.log(data);
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Weather</button>
    </div>
  );
}

export default WeatherComponent;

在这个例子中，我们的前端组件 WeatherComponent 将能够访问 NEXT_PUBLIC_WEATHER_API_URL 环境变量，这个变量被包含在构建的前端代码中，并且可以安全地用于API请求。

这种方法确保了我们的前端应用在运行时能安全地访问需要的配置，同时保护那些不应该公开的敏感信息。