How to Deploy a Next.js App to AWS S3 & CloudFront

Reason I Picked S3 + CloudFront

A simple Next.js frontend can be efficiently hosted using S3 and CloudFront, avoiding the complexity of EC2 or ECS. This combination provides excellent speed, free SSL, and minimal cost for most static sites.

Why This Matters

Traditional server-based deployments introduce operational overhead and scaling challenges. While containerization and orchestration address some of these, a static site hosted on object storage like S3 combined with a CDN like CloudFront offers a simpler, more cost-effective solution, especially for applications with predictable traffic patterns. Serverless approaches reduce the need for infrastructure management, but can introduce vendor lock-in and potential cold-start latency.

Key Insights

• next export command: Generates a static HTML export of a Next.js application, 2016.
• S3 Static Website Hosting: Allows direct serving of static content from an S3 bucket, eliminating the need for a web server.
• CloudFront deployment time: Approximately 10 minutes, based on the author’s experience.

Working Example

npm run build && next export
aws s3 sync out/ s3://next-demo-build --delete

Practical Applications

• Personal Portfolio: Hosting a static portfolio website with minimal maintenance.
• Pitfall: Forgetting to disable “Block Public Access” on the S3 bucket will prevent the website from being accessible.

References:

• https://dev.to/bi3wa3/how-i-deployed-a-nextjs-app-to-aws-s3-cloudfront-simple-setup-ee6