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:

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

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

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.

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:

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