Fix: SendGrid Environment Variables Not Working in Next.js on AWS Amplify

The Problem

You've deployed your Next.js application to AWS Amplify. You've set up SendGrid for your contact form. You've added your environment variables in the Amplify Console. Everything should work, right?

But when you test your contact form, you get this error:

API key does not start with "SG."

Or worse, when you add some debug logging:

console.log('SendGrid API Key exists:', !!process.env.SENDGRID_API_KEY);
// Output: SendGrid API Key exists: false

Your environment variable is set in Amplify, but it's coming through as undefined in your server-side code. What's going on?

Why This Happens

When you deploy a Next.js application with Server-Side Rendering (SSR) or Server Actions to AWS Amplify, there's a disconnect between where you set your environment variables and where they're actually available.

Environment variables set in the Amplify Console are available during the build phase, but they don't automatically get passed to the runtime environment where your server-side code executes.

This is different from static sites or client-side code, where environment variables are typically baked in at build time. With SSR, your code runs on the server after deployment, and it needs access to those variables at runtime.

The Solution

The fix is surprisingly simple. You need to explicitly pass your environment variables through your next.config.ts (or next.config.js) file:

import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
  // Explicitly pass environment variables to the server runtime
  env: {
    SENDGRID_API_KEY: process.env.SENDGRID_API_KEY,
    SENDGRID_FROM_EMAIL: process.env.SENDGRID_FROM_EMAIL,
    CONTACT_EMAIL_TO: process.env.CONTACT_EMAIL_TO,
  },
  // ... rest of your config
};
export default nextConfig;

This tells Next.js to take these environment variables from the build environment and make them available in the server runtime.

Step-by-Step Fix

1. Update your next.config.ts

Add the env block with all the environment variables your server-side code needs:

const nextConfig: NextConfig = {
  env: {
    SENDGRID_API_KEY: process.env.SENDGRID_API_KEY,
    SENDGRID_FROM_EMAIL: process.env.SENDGRID_FROM_EMAIL,
    CONTACT_EMAIL_TO: process.env.CONTACT_EMAIL_TO,
    // Add any other server-side env vars here
  },
  // ... rest of config
};

2. Verify your Amplify environment variables

In the AWS Amplify Console:
- Go to your app → Hosting → Environment variables
- Make sure your variables are set correctly:
- SENDGRID_API_KEY = SG.xxxxxxx... (your full API key)
- SENDGRID_FROM_EMAIL = your verified sender email
- CONTACT_EMAIL_TO = where form submissions should go

3. Add an amplify.yml (optional but recommended)

Create an amplify.yml in your project root for consistent builds:

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
      - .next/cache/**/*

4. Commit and redeploy

Push your changes. Amplify will automatically redeploy, and your environment variables will now be available in your server-side code.

Why This Works

The env block in next.config.ts does something important: it reads the environment variables during the build phase (when they ARE available) and bundles them into the server-side code that gets deployed.

Without this, the server runtime has no way to access the variables you set in the Amplify Console — they exist in the build environment but don't automatically transfer to the deployed Lambda functions or server processes that handle SSR.

Common Gotchas

Don't prefix with NEXT_PUBLIC_

Variables prefixed with NEXT_PUBLIC_ are exposed to the browser. For sensitive keys like API credentials, you want them server-side only. Use the env block approach instead.

Check your variable names

Make sure the variable name in Amplify exactly matches what you're using in your code. No extra spaces, no quotes around the value.

Redeploy after changes

Environment variable changes in Amplify require a redeploy to take effect. Either push a new commit or manually trigger a redeploy in the console.

Conclusion

This is one of those issues that can eat up hours of debugging time. The error messages don't point you in the right direction, and the Amplify documentation doesn't make this explicit for Next.js SSR deployments.

The fix is just a few lines in your Next.js config, but knowing you need to add them is the hard part. Hopefully this saves you the debugging time we spent figuring it out.

If you're building a Next.js site and need help with deployment, contact forms, or any WordPress/web development challenges, get in touch — we're happy to help.