How I Deploy My Next.js App on AWS Amplify

How I Deploy My Next.js App on AWS Amplify (Simple Guide + One Bug I Hit)

A beginner-friendly walkthrough: why I picked Amplify, how I deploy, what it costs, and a sneaky bug I ran into.

When my Next.js app was ready, I had a few hosting choices: Vercel, Netlify, Cloudflare Pages, raw AWS S3, or AWS Amplify. I picked Amplify. It’s been mostly smooth - except for one bug that broke my deployment for an afternoon. The fix was just one command. Let’s go through everything.

Why I Chose Amplify

In simple terms, Amplify does this: you push code to GitHub > it automatically builds your site > it puts it online. No servers to manage.

A few specific reasons:

• Everything in one place. My other AWS stuff is already on AWS, so keeping the website here too means one bill, one login, less juggling.
• Free CDN + free HTTPS. Your site loads fast everywhere in the world and automatically gets the padlock icon.
• Generous free tier. For a small app, you can run it for free or near-free.

My Setup: A Static Next.js App

My app doesn’t need a live server; it’s just pages that don’t change per visitor. So I told Next.js to export it as plain files.

In next.config.js:

const nextConfig = {
  output: 'export',
};

This one line means: when I run npm run build, Next.js spits out a folder called out/ full of plain HTML, CSS, and JS files. No server is needed to run it.

How I Deploy (3 Steps)

Step 1: Connect GitHub. In the Amplify dashboard, I connected my GitHub repo and picked my main branch. Amplify automatically noticed it’s a Next.js project.

Step 2: Tell Amplify how to build it. This is done with a small config file, amplify.yml:

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

The important part is baseDirectory: out. This tells Amplify: "the files to publish are in the out folder."

Step 3: Push code. Every time I run git push, Amplify automatically builds the project, takes the out/ folder, and puts it online. A few minutes later, my site is live.

That’s it for the normal flow. Here’s where it got tricky.

The Bug: Deployment Failed With a Hard Error

Everything was set up correctly on my end - but the deployment failed with this:

CustomerError: Can't find required-server-files.json in build output directory

What’s happening: Amplify has two modes for hosting a Next.js app:

• WEB - for plain static sites (exactly what output: 'export' makes)
• WEB_COMPUTE - for sites that need a live server (used for more advanced Next.js features)

When you connect a Next.js project, Amplify assumes you’ll need a server and defaults to WEB_COMPUTE. So it goes looking for required-server-files.json a file that only exists in a server build. But output: 'export' creates a static export, so that file is never generated. Amplify can't find it, and the deployment stops.

The fix — one command:

aws amplify update-app --app-id <YOUR_APP_ID> --platform WEB --region ap-south-1

Then trigger a redeploy from the Amplify console (or push a new commit). The error disappears because Amplify stops looking for server files that your static export never creates.

Bonus: Keeping the Build Small

Since Amplify charges based on build time and how much data your site sends to visitors, a smaller app = lower cost. Things that help:

• Check what’s making your app big using a bundle analyzer tool
• Load heavy parts only when needed (instead of all at once)
• Import only what you use from libraries, instead of the whole library
• Swap heavy libraries for lighter ones where possible

Smaller app > faster builds> less data sent > lower bill. It all adds up.

Handy Commands

1) Generate the build output and analyze the size of each file in the build folder.

If you want to generate the out/ folder directly from CloudShell:

aws amplify get-job --app-id <YOUR_APP_ID> --branch-name <YOUR_BRANCH_NAME> --job-id <YOUR_BUILD_ID>

2) Fix the WEB_COMPUTE bug

aws amplify update-app --app-id <YOUR_APP_ID> --platform WEB --region ap-south-1

Then trigger a redeploy for it to take effect.

Wrapping Up

For a static Next.js site, Amplify is genuinely simple: connect your repo, push code, get a live site with free HTTPS and a global CDN - usually for free.

The only real gotcha is the WEB vs WEB_COMPUTE platform setting. Amplify defaults to WEB_COMPUTE for any Next.js project, but if you’re doing a static export, you don’t need a server, and the deployment will fail until you switch it. One CLI command fixes it completely.

If your deployment fails and you can’t figure out why, that’s the first place to look.