Next.js App on AWS Amplify Cannot Access Environment Variables at Runtime

Question

Hello everyone,

I'm currently launching my first application on AWS and I'm fairly new to the platform, so I would really appreciate some help. I’ve successfully deployed my frontend using AWS Amplify and have also set up the backend.

However, I'm facing a major issue:
My Next.js frontend cannot connect to the backend. In CloudWatch, I’m seeing runtime errors saying that a certain Next.js secret (environment variable) is missing.

Here’s what I’ve done so far:

I have added all the required environment variables (like API keys and secrets) in the Amplify Console, under App settings > Environment Variables.

I also included the same values under the Hosting > Secrets section in Amplify.

I confirmed that these keys are also stored in AWS Secrets Manager.

My app builds successfully, but at runtime, I get errors stating the environment variables are not found.

So far, everything works perfectly in local development, and the frontend connects to the backend without issues when running locally.

Is there something I'm missing when deploying to AWS Amplify?
Do I need to pass these secrets differently for runtime access, especially with Next.js SSR or API routes?

Thanks in advance for any help!

re:Post Agent · Answer

The issue you're experiencing with your Next.js app on AWS Amplify not being able to access environment variables at runtime is a common challenge. There are a few important points to consider:

1. Environment variables in AWS Amplify are primarily available during the build process, not at runtime. This is why your app builds successfully but encounters issues when running.

2. For server-side rendering (SSR) and API routes in Next.js, you need to ensure that the environment variables are accessible at runtime on the server.

To resolve this issue, you can try the following approaches:

1. Use an initialization script: Create a script that runs at startup to fetch the secrets and set them as environment variables. This method has no limit on the number of variables you can use.

2. Use AWS Systems Manager Parameter Store: Store your secrets in Parameter Store and retrieve them in your application code as needed. This is especially useful for sensitive information.

3. Prefix your environment variables with NEXT_PUBLIC_ for client-side access. However, be cautious with this approach for sensitive data.

4. For server-side code, you may need to use AWS SDK to fetch secrets at runtime. Ensure your Amplify app has the necessary permissions to access Secrets Manager or Parameter Store.

5. Consider consolidating related variables to reduce the total number if you're approaching the limit (Amplify typically allows up to 28 environment variables).

If these approaches don't resolve the issue, you may need to reach out to AWS Support for more specific guidance on Amplify's limitations and best practices for managing environment variables in Next.js applications.

Remember to always handle sensitive information securely and avoid exposing secrets in client-side code.  
**Sources**  
[Issue with Amplify Environment Variables Limit | AWS re:Post](https://repost.aws/questions/QU62mblnxyQKG-yFbDAN2_Yg/issue-with-amplify-environment-variables-limit)  
[Accessing Amplify secrets at runtime | AWS re:Post](https://repost.aws/questions/QU8967I-ULRj-W4uT0k-ExZA/accessing-amplify-secrets-at-runtime)  
[How to Access a Secret in Secrets Manager from a NextJS app running on Amplify? | AWS re:Post](https://repost.aws/questions/QUj6U7bdTHQceyCte9dh6ItQ/how-to-access-a-secret-in-secrets-manager-from-a-nextjs-app-running-on-amplify)  
[How to correctly include and reference secret environment variables (AWS Amplify, process.env.secrets) | AWS re:Post](https://repost.aws/questions/QUm5Wo2gnIRy6p9DS1LuOVEQ/how-to-correctly-include-and-reference-secret-environment-variables-aws-amplify-process-env-secrets)

Next.js App on AWS Amplify Cannot Access Environment Variables at Runtime

Relevant content