AWS Amplify Gen 2 runtime env vars not available at SSR, causing undefined errors

Question

Major issues

I have a Next.js application that previously ran without issues on Vercel. However, upon deploying it to AWS Amplify, I encountered a 500 Internal Server Error. Based on the CloudWatch logs, it appears that none of the environment variables are being loaded at runtime—they're all marked as undefined. This likely stems from the Zod validation implemented in the codebase, which fails due to the absence of expected environment variables during execution.

enter image description here I updated my pipeline to make sure environment variables are available based on the server-side runtime, based on AWS documentation

https://docs.aws.amazon.com/en_us/amplify/latest/userguide/ssr-environment-variables.html

Pipeline

enter
version: 1
frontend:
 phases:
 preBuild:
 commands:
 - nvm install 22
 - nvm use 22
 - npm ci
build:
 commands:
 - |
 echo "[INFO] Writing environment variables into .env.production"
 cat << EOF > .env.production
 AUTH_SECRET=$AUTH_SECRET
 NEXTAUTH_URL=$NEXTAUTH_URL
 COGNITO_AUTH_DOMAIN=$COGNITO_AUTH_DOMAIN
 COGNITO_CLIENT_ID=$COGNITO_CLIENT_ID
 COGNITO_CLIENT_SECRET=$COGNITO_CLIENT_SECRET
 COGNITO_ISSUER=$COGNITO_ISSUER
 ACCESS_KEY_ID=$ACCESS_KEY_ID
 SECRET_ACCESS_KEY=$SECRET_ACCESS_KEY
 REGION=$REGION
 NEXT_PUBLIC_API_BASE_URL=$NEXT_PUBLIC_API_BASE_URL
 NEXT_PUBLIC_ENV=$NEXT_PUBLIC_ENV
 NEXT_PUBLIC_ROOT_DOMAIN=$NEXT_PUBLIC_ROOT_DOMAIN
 NEXT_PUBLIC_S3_BUCKET_NAME=$NEXT_PUBLIC_S3_BUCKET_NAME
 NEXT_PUBLIC_S3_BUCKET_REGION=$NEXT_PUBLIC_S3_BUCKET_REGION
 EOF
 - echo "[INFO] Verifying .env.production file:"
 - cat .env.production
 - npm run build
 - echo "[INFO] Copying .env.production to build directory:"
 - cp .env.production .next/
 - ls -la .next/.env.production
 artifacts:
 baseDirectory: .next
 files:
 - '**/*'
cache:
 paths:
 - node_modules/**/*
 - .next/cache/**/*

CloudFront error example

❌ Invalid environment variables: [
2025年09月11日T11:41:41.635Z
{
2025年09月11日T11:41:41.635Z
expected: 'string',
2025年09月11日T11:41:41.635Z
code: 'invalid_type',
2025年09月11日T11:41:41.635Z
path: [ 'AUTH_SECRET' ],
2025年09月11日T11:41:41.635Z
message: 'Invalid input: expected string, received undefined'
2025年09月11日T11:41:41.635Z
},

The issue is happenig for all the environment variable. Please look at the attached screenshot.

enter image description here enter image description here

Answer 1

The issue is fixed, I just updated the pipeline.
version: 1
frontend:
 phases:
 preBuild:
 commands:
 - nvm install 22
 - nvm use 22
 - node -v
 - npm -v
 - rm -rf node_modules
 - npm install
 build:
 commands:
 - env | grep -e ACCESS_KEY_ID >> .env.production
 - env | grep -e AUTH_SECRET >> .env.production
 - env | grep -e COGNITO_AUTH_DOMAIN >> .env.production
 - env | grep -e COGNITO_CLIENT_ID >> .env.production
 - env | grep -e COGNITO_CLIENT_SECRET >> .env.production
 - env | grep -e COGNITO_ISSUER >> .env.production
 - env | grep -e NEXTAUTH_SECRET >> .env.production
 - env | grep -e NEXTAUTH_URL >> .env.production
 - env | grep -e NEXT_PUBLIC_API_BASE_URL >> .env.production
 - env | grep -e NEXT_PUBLIC_ENV >> .env.production
 - env | grep -e NEXT_PUBLIC_ROOT_DOMAIN >> .env.production
 - env | grep -e NEXT_PUBLIC_S3_BUCKET_NAME >> .env.production
 - env | grep -e NEXT_PUBLIC_S3_BUCKET_REGION >> .env.production
 - env | grep -e REGION >> .env.production
 - env | grep -e SECRET_ACCESS_KEY >> .env.production
 - env | grep -e VITE_APP_BASE_URL >> .env.production
 - env | grep -e VITE_APP_S3_BUCKET_NAME >> .env.production
 - env | grep -e VITE_APP_S3_BUCKET_REGION >> .env.production
 - npm run build
 artifacts:
 baseDirectory: .next
 files:
 - '**/*'
 cache:
 paths:
 - node_modules/**/*
 - .next/cache/**/*