在使用 Next.js 时,可以通过创建一个名为 .env
的文件来设置本地环境变量。该文件应该位于项目的根目录中。
首先,确保你的项目已经安装了 dotenv
包,可以使用以下命令进行安装:
npm install dotenv
接下来,在 .env
文件中,你可以定义你需要的环境变量。例如:
API_KEY=your_api_key
API_URL=https://api.example.com
请注意,不要在 .env
文件中添加引号或其他特殊字符。这些变量将会被读取为字符串。
在你的 Next.js 项目中,你可以使用 dotenv
包来读取这些环境变量。首先,在需要使用环境变量的地方导入 dotenv
:
import dotenv from 'dotenv';
然后,在需要使用环境变量的地方调用 dotenv.config()
来加载 .env
文件中的环境变量:
dotenv.config();
现在,你可以通过 process.env
对象来访问这些环境变量了。例如,你可以在 Next.js 中的页面组件中这样使用环境变量:
import React from 'react';
const MyComponent = () => {
return (
API Key: {process.env.API_KEY}
API URL: {process.env.API_URL}
);
};
export default MyComponent;
这样,你就可以在 Next.js 中使用 .env
文件中定义的本地环境变量了。