NextJS 如何在客户端获取环境变量？

在Next.js中，你可以在客户端获取环境变量，但只限于以NEXT_PUBLIC_前缀开始的变量。这些变量在构建时会被嵌入到应用程序中，并且可以在客户端代码中直接访问。

例如，如果你有一个名为NEXT_PUBLIC_API_URL的环境变量，并希望在客户端代码中访问它，你可以如下操作：

1. 在项目根目录下的.env.local文件中定义环境变量（如果文件不存在，你需要创建它）：

dotenv
NEXT_PUBLIC_API_URL=https://your-api-url.com

1. 在你的代码中，你可以使用process.env.NEXT_PUBLIC_API_URL来访问此变量。

例如，在一个组件中：

jsx
function MyComponent() {
  const apiUrl = process.env.NEXT_PUBLIC_API_URL;

  // 使用 apiUrl 变量的值作为 API URL
  // ...

  return (
    <div>
      The API URL is: {apiUrl}
    </div>
  );
}

export default MyComponent;

在构建应用程序时（next build），Next.js会将所有以NEXT_PUBLIC_前缀的环境变量内联到构建的代码中。因此，与服务器端不同，客户端代码中不应包含敏感信息，因为所有这些信息都会暴露给最终用户。