Hosting static Next.js website on AWS S3
Tags: aws, nextjs, react, s3
Published: 2021-02-09 21:52:11

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](https://nodejs.org/en/) and [NPM](https://www.npmjs.com/) 
> installed and [AWS CLI](https://aws.amazon.com/cli/) installed and configured.

# Getting started

First, create a new Next.js app and change into the directory:
```shell
npx create-next-app next-website

cd next-website
```

Start your Next.js app locally:
```shell
npm run dev
```

The server will start on port `3000`. Access your app with `http://localhost:3000`:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/56ck3a5dbajaj63mel16.png)

# 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:
```json
"scripts": {
    "build": "next build && next export",
  }
```

Then run:
```shell
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](https://console.aws.amazon.com/console/home) and Click **Services** -> **S3** to open [S3 Management Console](https://s3.console.aws.amazon.com/s3/home).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g61hs324ru88lnjjocq2.png)

Choose **Create bucket**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u6z19axzmavx1amhvcyh.png)

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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9xawzu6e9fs7c7tbg8qj.png)

Select **Region** your S3 bucket will be created in.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lkgmrh9ug2uvloaotsy8.png)

Choose **Create bucket**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f0dpoiy9xz0t8a2194gp.png)

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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s2zxhklrz61hf770psz8.png)

## 1. Disable Block Public Access Settings

Choose **Permissions**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/69grjxzjy1c5wkhu7veh.png)

Under **Block public access (bucket settings)** choose **Edit**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ja9sdxy7dd6ymy5w4l7e.png)

Unckeck **Block all public access** and choose **Save changes**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/re7xqh8cvkkrr4w1mxt4.png)

**Confirm** your changes.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lpoft089y4cdfv3o8mfu.png)

## 2. Add a Bucket Policy

In the same page under **Bucket policy** choose **Edit**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mfpjk4w19zd4ggdu0g8l.png)

In policy section copy the following and replace *[bucket-name]* with your bucket name:
```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[bucket-name]/*"
        }
    ]
}
```

Choose **Save changes**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0sct4pc5z0613bequ6a1.png)

## 3. Enable Bucket Static Website Hosting

Choose **Properties**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z7onadtkdp6i6fugn1mv.png)

Under **Static website hosting** choose **Edit**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/umhbvr7akbkycasg9ve7.png)

Select **Enable** static website hosting and **Host a static website**. In **Index document** enter *index.html* and in **Error document** enter *404.html*.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3b16co8wmrho35d6bk21.png)

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](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-quickstart.html) 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**):
```shell
aws s3 sync ./out/ s3://next-website/
```

Now all your files and folders in *out* directory have been uploaded to your bucket.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k4o8vxm3vfg4wxiy8d5c.png)

To access your website Choose **Properties**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w3lkw74bd4jr4exke0o0.png)

Under **Static website hosting** you'll find your **Bucket website URL**.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4tv13nzmr5d8i9kybyfm.png)

Open the URL:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6t437p96r1s4hbdlnr5i.png)

**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.**