How I Deployed Next.js on AWS S3 + CloudFront

Deploying a Next.js site to AWS doesn't have to mean ECS or Lambda. For static or hybrid sites, S3 + CloudFront is often the cheapest, most scalable option — and the setup is surprisingly straightforward once you understand the pieces.

The Architecture

The stack is three services deep:

1. S3 stores the exported HTML, JS, and CSS as objects
2. CloudFront caches and serves them at the edge globally
3. GitHub Actions builds, exports, syncs to S3, and invalidates the CDN cache

Exporting Next.js

Add output: 'export' to next.config.ts:

// next.config.ts
import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  output: 'export',
  trailingSlash: true,
}
 
export default nextConfig

Then npm run build produces an out/ folder — plain static files ready to sync.

The GitHub Actions Pipeline

- name: Sync to S3
  run: aws s3 sync out/ s3://${{ secrets.BUCKET_NAME }} --delete
 
- name: Invalidate CloudFront
  run: |
    aws cloudfront create-invalidation \
      --distribution-id ${{ secrets.CF_DIST_ID }} \
      --paths "/*"

With this pipeline, every push to main triggers a fresh deploy in under 90 seconds.