在Next.js中,你可以在客户端获取环境变量,但只限于以NEXT_PUBLIC_
前缀开始的变量。这些变量在构建时会被嵌入到应用程序中,并且可以在客户端代码中直接访问。
例如,如果你有一个名为NEXT_PUBLIC_API_URL
的环境变量,并希望在客户端代码中访问它,你可以如下操作:
- 在项目根目录下的
.env.local
文件中定义环境变量(如果文件不存在,你需要创建它):
dotenvNEXT_PUBLIC_API_URL=https://your-api-url.com
- 在你的代码中,你可以使用
process.env.NEXT_PUBLIC_API_URL
来访问此变量。
例如,在一个组件中:
jsxfunction 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_
前缀的环境变量内联到构建的代码中。因此,与服务器端不同,客户端代码中不应包含敏感信息,因为所有这些信息都会暴露给最终用户。
2024年6月29日 12:07 回复