DEV Community

loading...

Hosting static Next.js website on AWS S3

hossamelmansy profile image Hossam ELMansy ・4 min read

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
Enter fullscreen mode Exit fullscreen mode

Start your Next.js app locally:

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

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",
  }
Enter fullscreen mode Exit fullscreen mode

Then run:

npm run build
Enter fullscreen mode Exit fullscreen mode

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.
Alt Text

Choose Create bucket.
Alt Text

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

Select Region your S3 bucket will be created in.
Alt Text

Choose Create bucket.
Alt Text

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

1. Disable Block Public Access Settings

Choose Permissions.
Alt Text

Under Block public access (bucket settings) choose Edit.
Alt Text

Unckeck Block all public access and choose Save changes.
Alt Text

Confirm your changes.
Alt Text

2. Add a Bucket Policy

In the same page under Bucket policy choose Edit.
Alt Text

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]/*"
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

Choose Save changes.
Alt Text

3. Enable Bucket Static Website Hosting

Choose Properties.
Alt Text

Under Static website hosting choose Edit.
Alt Text

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

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/
Enter fullscreen mode Exit fullscreen mode

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

To access your website Choose Properties.
Alt Text

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

Open the URL:
Alt Text

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.

Discussion (0)

pic
Editor guide