This content originally appeared on DEV Community and was authored by bi3wa3
Recently I had to put a small Next.js frontend online, and instead of spinning up EC2 or ECS, I decided to keep things simple and try S3 + CloudFront. Honestly, it turned out to be faster and easier than I expected, so I’m sharing the exact steps here in case it helps someone.
Reason I Picked S3 + CloudFront
For a basic frontend, you really don’t need anything complex.
S3 + CloudFront gives you really good speed with free SSL with almost Zero Cost. For most static sites, this setup is more than enough.
Step 1: Build the Next.js App
Inside my project, I ran:
npm run build
But since I wanted a static export, I used:
next build && next export
This creates an out/ folder.
Everything inside that folder is what we will upload.
Step 2: Create an S3 Bucket
I created a new S3 bucket (named mine something simple like next-demo-build).
A few things to not miss which are to Disable “Block public access” after that Enable Static Website Hosting then Upload the out/ folder contents
At this point, the site is technically live — just without HTTPS and caching.
Step 3: Add CloudFront
To make it production-style, I added CloudFront which has very easy steps i.e first Create distribution and Select the S3 bucket as the origin after that Use an ACM certificate for HTTPS then Set index.html as the default root object.
CloudFront took around 10 minutes to deploy for me.
Step 4: Updating the Site Later
To update the website next time, I just sync the folder:
aws s3 sync out/ s3://next-demo-build --delete
Replacing old files with the latest build.
Conclusion
This setup is perfect if you just want frontend up and running without managing servers. It’s simple, cheap, and works really well. If you haven’t tried hosting a static Next.js build on AWS yet, give this a shot it’s honestly one of the easiest cloud deployments I’ve done.
CloudFront took around 10 minutes to deploy for me.
This content originally appeared on DEV Community and was authored by bi3wa3