If your environment variables are not working in AWS Amplify builds—even though you’ve added them in the dashboard—you’re not alone. This is a common issue with Next.js apps on Amplify, especially when dealing with server-side logic like SMTP, reCAPTCHA, or API keys.

The short answer: Amplify does not automatically expose runtime environment variables to your build output unless you explicitly inject them during build time. The fix is to write them into a .env file inside amplify.yml before running the build.

Why AWS Amplify Environment Variables Fail

The problem exists because AWS Amplify handles environment variables differently than traditional servers.

In Amplify:

• Environment variables are available only during build phase
• Next.js reads environment variables at build time, not runtime
• Server-side functions (like API routes) may not receive them unless properly injected

According to the official AWS Amplify documentation, environment variables must be explicitly used during build if your framework compiles them into output.

A real-world issue:

You define:

[email protected]

But during runtime:

process.env.SMTP_USER → undefined

This happens because Next.js compiled without that variable being injected.

The Solution — Inject Environment Variables via amplify.yml

The correct fix is to echo environment variables into a .env file during build.

Step 1: Update amplify.yml

Use this configuration:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - echo "RECAPTCHA_SECRET_KEY=$RECAPTCHA_SECRET_KEY" >> .env
        - echo "SMTP_HOST=$SMTP_HOST" >> .env
        - echo "SMTP_PORT=$SMTP_PORT" >> .env
        - echo "SMTP_USER=$SMTP_USER" >> .env
        - echo "SMTP_PASS=$SMTP_PASS" >> .env
        - echo "SMTP_FROM=$SMTP_FROM" >> .env
        - echo "NEXT_PUBLIC_RECAPTCHA_SITE_KEY=$NEXT_PUBLIC_RECAPTCHA_SITE_KEY" >> .env
        - echo "NEXT_PUBLIC_GA_MEASUREMENT_ID=$NEXT_PUBLIC_GA_MEASUREMENT_ID" >> .env
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Step 2: Redeploy

Commit → Push → Amplify rebuild

This ensures variables are available during build and embedded into your app.

Why This Works

Next.js loads .env files at build time.

By writing:

echo "SMTP_USER=$SMTP_USER" >> .env

you are:

• Injecting Amplify environment variables into .env
• Making them visible to Next.js compiler
• Ensuring they exist in API routes and server functions

This aligns with how frameworks like Next.js handle environment variables internally.

Comparison: Amplify vs Traditional Hosting

Amplify trades flexibility for simplicity, but requires this workaround.

Common Mistakes (Very Important)

The most common mistake is assuming Amplify behaves like a backend server.

Mistake 1: Not using .env

❌ Only setting variables in Amplify UI

Mistake 2: Using runtime variables in Next.js

process.env.SMTP_PASS

If not injected at build → undefined

Mistake 3: Forgetting NEXT_PUBLIC prefix

Client-side variables must use:

NEXT_PUBLIC_*

Otherwise they won’t be exposed in frontend.

Real-World Example

At Hitori Tech, we implemented this fix for a client running:

• Next.js on Amplify
• SMTP email service
• Google reCAPTCHA

Before fix:

Email API failing
process.env.SMTP_USER undefined

After fix:

100% working
Emails sent successfully
No runtime errors

Build-time injection solved the issue completely.

If you're building scalable apps on AWS and want to avoid issues like this, it’s worth structuring your deployment correctly from the start. At Hitori Tech, we help teams build reliable DevOps pipelines, automation workflows, and production-ready deployments.

FAQ Schema

Frequently Asked Questions

What is the correct way to use environment variables in AWS Amplify?

The correct way is to inject environment variables into a .env file during the build process using amplify.yml. This ensures frameworks like Next.js can access them at build time.

Why are my SMTP credentials not working in Amplify?

SMTP credentials usually fail because they are not available during build time. You need to echo them into a .env file before running the build process.

Can I use environment variables without amplify.yml?

No, not reliably. For Next.js and similar frameworks, environment variables must be injected during build using amplify.yml.

Should I use NEXT_PUBLIC for all variables?

No. Only variables needed in the frontend should use NEXT_PUBLIC_. Sensitive values like SMTP passwords, API secrets, and reCAPTCHA secret keys must remain server-side.