reactjs - 如何使用 AWS Amplify 和 Next.js 创建生产环境变量

Question

我有一个 API key ，需要它来访问 API 端点。在我的 Next.js 应用程序中，我将此 key 存储在 .env.local 下，如下所示:

API_KEY=qwerty123

我在我的 getStaticProps 函数中使用 process.env 访问它:

 const parkData = await fetch(
      `${URL}parks?parkCode=${params?.parkCode}&limit=465&api_key=${process.env.API_KEY}`,
      reqBody
    )

当我尝试在生产中运行此程序时，我收到一条错误消息，指出 API key 无效。我知道 API 是正确的，因为当我在本地运行该项目时，API 数据会加载。

    "code": "API_KEY_INVALID",
    "message": "Your API key is not valid. Please get a new one at https://www.nps.gov/subjects/developer/get-started.htm"

我的问题是，我是否需要更改在生产构建的 getStaticProps 函数中调用 API key 的方式？

注意:我已确保将环境包含在 Amplify 控制台中。

Answer 1

环境变量不会传递到 Lambda 函数

由于某种原因，我自己也不确定为什么你仍然需要在 next.config.js 文件中添加环境变量。

module.exports = {
  env: {
    MY_ENV_VAR: process.env.MY_ENV_VAR
  }
};

Amplify troubleshooting docs