Getting Started with AWS Amplify and Next.js

Deploying a modern Next.js application on AWS Amplify using Static Site Generation (SSG) should, in theory, be a straightforward process. However, recent updates to the AWS console's auto-detection mechanisms can sometimes force your project into a Server-Side Rendering (SSR) environment, causing unexpected build failures.

In this guide, I will cover the full cycle to deploy your static site efficiently, keep your hosting costs at zero, and cleanly bypass the cloud provider's automatic (and sometimes stubborn) configurations.

Why AWS Amplify?

AWS Amplify offers a simplified, Git-based deployment experience for modern web applications, bringing enterprise-grade infrastructure to personal projects and startups alike. The main benefits include:

• ▹

  Integrated CI/CD: Every push to your repository's production branch automatically triggers a new isolated build. You don't need to manually upload files or run complex Jenkins pipelines for a frontend app.

• ▹

  Global CDN: Your site is distributed via Amazon CloudFront, ensuring ultra-low latency worldwide. Whether a user accesses your site from Uruguay or Japan, it loads in milliseconds.

• ▹

  Free SSL Management: HTTPS certificates are automatically provisioned and renewed via AWS Certificate Manager with zero manual configuration.

Step 1: The Next.js Configuration

Before touching the cloud, we need to prepare our code. By default, Next.js expects a Node.js server to run. To deploy as a purely static site, we must tell the framework to generate a static HTML export.

You need to open your next.config.ts (or next.config.js) file and ensure you add the following setting inside your nextConfig object:

output: 'export'

If you are using the default Next.js Image component, you might also need to add:

images: { unoptimized: true }

When you run the build script locally or in the cloud, this configuration will generate an out folder containing your pure HTML, CSS, and optimized JS assets.

Step 2: The Build Specification (amplify.yml)

When connecting your GitHub repository to Amplify, you need to configure the Build Settings. Ensure the baseDirectory points exactly to out so Amplify knows where your compiled files live.

Your build specification should look like this:

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

Pro tip: Adding that last line for the .next/cache folder significantly speeds up your subsequent deployments by allowing the Turbopack engine to reuse previously compiled assets.

Step 3: The Architect's Fix (Bypassing SSR)

Here is the real-world gotcha that many developers face: Amplify might auto-detect the Next.js footprint in your code and forcefully provision a WEB_COMPUTE environment. When the build finishes, you will likely hit this dreaded error:

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

This happens because AWS is ignoring your out directory and looking for a Node.js server structure. If this happens, do not fight the visual User Interface. Force the static architecture via the AWS CLI.

Run this command in your terminal to overwrite the infrastructure settings directly through the API:

aws amplify update-app --app-id YOUR_APP_ID --platform WEB --region YOUR_REGION

By changing the platform from WEB_COMPUTE to WEB, you are strictly enforcing a static hosting environment. Once updated, hit "Redeploy" in the console. Your static build will now pass perfectly.

Step 4: Connecting a Custom Domain

To give your project a professional look, you will want to connect a custom domain. Head over to Hosting > Custom domains in the Amplify console.

If you are using a third-party registrar like Namecheap or GoDaddy and want to avoid Amazon Route 53 monthly hosted zone costs, choose "Manual Configuration".

AWS will start generating a free SSL certificate and provide you with specific DNS records:

• ▹A CNAME record to validate your SSL certificate ownership.
• ▹An ALIAS (or ANAME) record for your root domain pointing to the CloudFront distribution.
• ▹A CNAME record for your www subdomain.

Just copy these records into your DNS provider's Advanced DNS settings. Remember to delete any old "parking page" records that might conflict. After saving, wait for the DNS propagation (which can take from 15 minutes to a couple of hours), and your site will be officially live and secure.

Conclusion

AWS Amplify is an incredibly powerful choice for deploying portfolios and platforms built with Next.js. By understanding how to force the static WEB environment and managing your own DNS records, you can leverage Amazon's global infrastructure while keeping full control over your architecture and costs.