Deploying Static React Next.js to AWS S3


Next.js is the React Framework that helps deploying a static website or dynamic website with server side rendering.

This post will illustrates how to host a simple React application on AWS S3 using Next.js framework. Node.js is required.

Setup Next.js project

npm init next-app

This command will ask couple simple questions including project name & selecting a template

  • enter nextjs-on-s3 for the project name (or whatever name you like)
  • select Default starter app as the template

It will create the folder same as the project name and install all the required packages such as react, react-dom and next.

The startup React page is located at nextjs-on-s3/pages/index.js. To perform a quick test, execute the following commands:

cd nextjs-on-s3
npm run dev

The server will run on http://localhost:3000. Navigate to the url to see the webpage. You should be greeted with a webpage like the following:

webpage

Setup AWS S3 static website

This section will demonstrate how to setup a S3 bucket to serve as a static website. You can skip to the next section if you already know how to do it. I assume you already have an AWS account with management console access.

Create a S3 Bucket

  • go to Services > S3
  • click on Create bucket
  • enter a unique name for the bucket (e.g. nextjs-on-s3)
  • uncheck Block all public access
  • check the acknowledgement
  • click Create bucket
create bucket

Enable static website hosting

  • click on newly created bucket
  • go to Properties > Static website hosting
  • select Use this bucket to host a website
  • enter index.html for Index document
  • click Save
static website

Note the Endpoint at the top. That will be the URL to navigate the website. Next we will enable public access to the bucket using bucket policy.

  • go to Permissions > Bucket Policy
  • enter the following policy and click Save
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<bucket-name>/*"
        }
    ]
}

note: replace with your bucket name at Resource.

Now you should be greeted by the following message that the bucket has public access.

enable public access

Publish Next.js Application to S3 bucket

Note: This assumes your development environment already has aws cli installed and also has a profile configured with access key ID and secret access key that has read/write access to the S3 bucket.

First add the following line to the scripts section in package.json file:

"export": "next export"

This script, when executed, will generate all the static files (to folder out) necessary to run the application. Now run the following commands to publish to S3 bucket:

npm run build
npm run export
aws s3 sync out s3://<bucket-name>/

Replace with your bucket name in the aws command. The files should be uploaded successfully. Now navigate to the Endpoint URL noted before:

hosted static website

Awesome. Now we have a working Next.js application running on S3 static website.

To use a custom domain name, simply create a CNAME record at your DNS server to point to the endpoint URL.

Extra: Enabling Typescript

Next.js has integrated support of Typescript. All you need is to install the needed packages:

  • touch tsconfig.json
  • npm install –save-dev typescript @types/react @types/node

Leave a Reply

Close Menu