Today, we will explore how to generate a static build in Next.js 14 and upload it to AWS S3 to serve it as a static website. This is a great option for deploying serverless websites with minimal maintenance and cost.

Step 1: Generate a Static Build

Next.js allows you to export your project as a fully static HTML/CSS/JS bundle. To generate the static build, update the next.config.mjs:

const nextConfig = {
  output: 'export',
}

and run

npm run build

This will create an out/ folder in your project, containing the static files that can be deployed to any static hosting service.

Step 2: Prepare AWS S3 Bucket

Before uploading, ensure you have an S3 bucket ready. If not, create one through the AWS Management Console.

• Navigate to the S3 service in the AWS console.
• Create a new bucket, name it, and set it to host a static website.
• Enable public access for the bucket so the static site can be viewed publicly.

Step 3: Upload Static Files to S3

With AWS CLI or AWS console, upload static files from the out/ directory to your S3 bucket:

Step 4: Configure S3 Bucket for Static Website Hosting

• Go to your S3 bucket in the AWS Console.
• Click on the “Properties” tab and scroll down to "Static website hosting."
• Enable static website hosting and set your index document (typically index.html).

Now, you can visit the URL of your S3 bucket, and your Next.js static site should be live!