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