Hosting static Next.js website on AWS S3

In this tutorial you will learn how to host a static Next.js app on AWS S3.

To complete this tutorial you must have both NodeJS and NPM
installed and AWS CLI installed and configured.

Getting started

First, create a new Next.js app and change into the directory:

npx create-next-app next-website

cd next-website

Start your Next.js app locally:

npm run dev

The server will start on port 3000. Access your app with http://localhost:3000:

Build Next.js App

Before building your app you need to know the following Next.js commands:

• next build creates an optimized build of your app.
• next export allows you to export your app to static HTML.

To build your app you need to combine both commands.

Update your scripts in your package.json like this:

"scripts": {
    "build": "next build && next export",
  }

Then run:

npm run build

Now you now have a static version of your app in the out directory.

Create and Configure S3 Bucket

Open AWS Management Console and Click Services -> S3 to open S3 Management Console.

Choose Create bucket.

In Bucket name, enter your bucket name. Bucket name must meet the following:

• DNS-compliant.
• Unique across all Amazon S3 buckets.
• Between 3 and 63 characters long.
• Doesn't contain uppercase characters.
• Start with a lowercase letter or number.

Select Region your S3 bucket will be created in.

Choose Create bucket.

Configuring your S3 bucket as a static website requires three steps:

1- Disable Block Public Access settings.
2- Add a Bucket Policy that grants public read access.
3- Enable bucket Static website hosting.

Choose your bucket. And let's begin configure it.

1. Disable Block Public Access Settings

Choose Permissions.

Under Block public access (bucket settings) choose Edit.

Unckeck Block all public access and choose Save changes.

Confirm your changes.

2. Add a Bucket Policy

In the same page under Bucket policy choose Edit.

In policy section copy the following and replace [bucket-name] with your bucket name:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[bucket-name]/*"
        }
    ]
}

Choose Save changes.

3. Enable Bucket Static Website Hosting

Choose Properties.

Under Static website hosting choose Edit.

Select Enable static website hosting and Host a static website. In Index document enter index.html and in Error document enter 404.html.

Choose Save changes.

Now that you have created and configured your bucket, it's time to publish your Next.js app to it.

Publish Next.js App to S3 Bucket

I'll use AWS CLI to upload Next.js app files and folders to S3 as this method easy and more practical than using AWS Console.

To configure AWS CLI click here and follow the instructions.

Change into your Next.js app directory and enter the following command (Don't forget to change bucket name with yours):

aws s3 sync ./out/ s3://next-website/

Now all your files and folders in out directory have been uploaded to your bucket.

To access your website Choose Properties.

Under Static website hosting you'll find your Bucket website URL.

Open the URL:

Congratulations🎉🎉 You have successfully published your Next.js website on AWS S3.

Thank you for following through this tutorial. If you have any questions and/or if you want me to write about anything related to AWS please let me know.