Next.js Deployment to AWS Amplify: Environment Variable Issue & Fix

Recently, I had to spent hours to figure it out environment variable issue on NextJS deployment to AWS Amplify. Context Application has text search from MongoDB where user do the search from UI. API provided by the NextJS itself located at, api/search/route.ts Route handler connect to the Mongodb using mongoose.connect function. Function has an environment variable call MONGDOB_URI. This is coming from an environment variable. Application has some public environment variables as well (obviously start with NEXT_PUBLIC_XXXX). All variables set via Amplify Environment Variable section, Problem When application deployed to the Amplify, MONGDOB_URI read as 'undefined' while other public environment variables are reading without any issue. Inspections When I check the build log, all environment variables are reading well, But, when I run the application, CloudWatch logs says it is not found MONGDOB_URI Public variables are working fine, Solutions tried out Some articles says that add the missing variable implicitly add to the next.config.ts file. const nextConfig: NextConfig = { /* config options here */ env: { MONGODB_URI: process.env.MONGODB_URI, }, }; export default nextConfig; Then, it worked!!!. But, it has a huge security issue, which is secured database connection will be exposed to the public. Then, removed the next cache from the amplify.yml file. Still did not work :( Solution At the last, created the .env.production file on the fly and appended the MONGODB_URI into the file using amplify.yml file, Then, it worked!!! Conclusion For some reason, only public environment (starts with NEXT_PUBLIC) can be fetch from the Amplify when it is building without needing .env.production file. For secured variables, we need to append them into the .env.production file. Anyone encountered this issue? Hope this help to someone for solution or debate !!! Cheers... Happy coding!!!

Mar 29, 2025 - 10:26

Next.js Deployment to AWS Amplify: Environment Variable Issue & Fix

Recently, I had to spent hours to figure it out environment variable issue on NextJS deployment to AWS Amplify.

Context

Application has text search from MongoDB where user do the search from UI. API provided by the NextJS itself located at,

api/search/route.ts

Route handler connect to the Mongodb using mongoose.connect function. Function has an environment variable call MONGDOB_URI. This is coming from an environment variable. Application has some public environment variables as well (obviously start with NEXT_PUBLIC_XXXX). All variables set via Amplify Environment Variable section,

Problem

When application deployed to the Amplify, MONGDOB_URI read as 'undefined' while other public environment variables are reading without any issue.

Inspections

When I check the build log, all environment variables are reading well,

But, when I run the application, CloudWatch logs says it is not found MONGDOB_URI

Public variables are working fine,

Solutions tried out

Some articles says that add the missing variable implicitly add to the next.config.ts file.

const nextConfig: NextConfig = {
  /* config options here */
  env: {
    MONGODB_URI: process.env.MONGODB_URI,
  },
};

export default nextConfig;

Then, it worked!!!. But, it has a huge security issue, which is secured database connection will be exposed to the public.

Then, removed the next cache from the amplify.yml file.

Still did not work :(

Solution

At the last, created the .env.production file on the fly and appended the MONGODB_URI into the file using amplify.yml file,

Then, it worked!!!

Conclusion

For some reason, only public environment (starts with NEXT_PUBLIC) can be fetch from the Amplify when it is building without needing .env.production file. For secured variables, we need to append them into the .env.production file.

Anyone encountered this issue? Hope this help to someone for solution or debate !!!

Cheers... Happy coding!!!