How to make production environmental variables with AWS Amplify and Next.js

Question

I have an API key that I need to access an API endpoint. In my Next.js app, I store this key under .env.local like so:

API_KEY=qwerty123

And I access it in my getStaticProps function with the process.env:

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

When I try to run this in production I am getting an error that the API key is invalid. I know that the API is correct because when I run the project locally, the API data loads.

    "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"

My question is do I need to change how I call the API key in my getStaticProps function for the production build?

Note: I've made sure to included the env in the Amplify console.

Answer 1

Environment variables are not carried through to Lambda functions

For some reason, I'm not sure why myself, you still have to add the env's in your next.config.js file.

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

Amplify troubleshooting docs