How to deploy static Next.js to AWS S3

Next.js this fabulous open source framework based on React allows you to manage an entire application! Both front-end and back-end, perfect for a javascript developer and all this with high performance, but if you arrive on this article, you must surely know it, if not, hop, little link to the documentation

Table of contents

For this tutorial Node.js is required.

• Create Next.js app
• Setup AWS S3 butcket static website
• Publish Next.js Application to S3 bucket

Create Next.js app

As recommended by Next.js we will use create-next-app for create a project.
There are two possibilities to initialize a project:

npx create-next-app
# or
yarn create next-app

Then follow the instructions and finally go to our project and start it

cd my-project && yarn dev

The server starts up on port 3000, so let's go to http://localhost:3000

Congratulations 🎉 ! now let's deploy this static Next.js application to aws S3 bucket

Setup AWS S3 butcket static website

To continue the tutorial, we are going to move on to the aws console, for this section I am assuming you already have an AWS account with access to the management console.

1. Access your management console
2. on Find Services, search S3

1. click on Create bucket

1. enter name your Bucket name (e.g: my-awesome-nextjs-app), it must be unique

1. enable access public and valide by unchecking Block all public access and check the acknowledgment of receipt, you can create the bucket

1. on list, select your bucket

1. go to properties > Static website hosting, select Enable static website hosting and Host as static website on index document and Error document you can ad index.html, Save changes

1. Now go to Permissions > Bucket policy edit and add this, change Ressource with your bucket name

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[bucket-name]/*"
        }
    ]
}

Now you're ready to export the Next.js app and add this to yout bucket 🎉

Publish Next.js Application to S3 bucket

To complete this tutorial, we're going to export our Next.js app using package.json and import the exported app into our S3 bucket.

To start, we will have to modify the file package.json to change a build script :

    "build": "next build && next export"

This build script build the app and generate all the static files (to folder out) necessary to run the application.

Go to your S3 Bucket and upload the contents of the out folder

Click on Upload, after loading you can exit

To access our application, go to Properties> Static website hosting where the bucket link is displayed

let's go to this link :

🎉 Congratulations 🎉 We have uploaded our static Next.js app to aws S3 bucket

All you have to do is code your static application, export it and add it to your bucket

Conclusion

As you can see it is very easy to host a static Next.js app on aws, in the next article i think we will see how to work with github actions to use continuous integration on our Next.js app, so every merge on branch main your application will be updated on your bucket.

Thank you for following this article, do not hesitate to give me your feedback and if you liked it share it and follow me on Twitter

Comments

[Nafeez Abrar]

Great article for beginners! It's well-written and concise, so big thumbs up for the good work.

I noticed that this article is using next export, which has been removed. To update it, simply add "output: export" to your next.config.js file. That should do the trick!

[Simon Ugorji]

I had issues hosting this on S3 because of the URLs as /home on my navbar doesn't point to /home.html and redirection rules does not work either.

Using trailingSlash : true in next.config.json seems to resolve the issue but then you would notice that your site serves up as /home/ instead of /home and it created problems with Google indexing.

Using other services on AWS will resolve the issue and even rewriting the links to /home.html will work as well but it's stressful.

I resorted to deploying the site on render then I added a custom domain to point to my domain in route53

[huy dang]

Hi Simon,
Can you explain more detail your solution? I faced to same issue and i want to fix it.
Which service of AWS should I use and how can i do it?
Thanks a lot.

[Illia Lukianov]

For those like me - this guide doesn't cover case when you have more than one page - all other *.html files are ignored. Basically all routing happens client side, unless you are on index page. Ideally we should serve upon /about request file about.html and not index.html.
I am gonna try to this with s3 redirects, will see how hard it is but it feels like should be configured during deploy each time, depending on pages.

[Anoop Chauhan]

Hi, have you found any workaround for multiple routes deployment

[Illia Lukianov]

I got laid off from company where that was needed :)

[Arcane Mastermind]

For anyone reading here the solution is adding trailingSlash to the config:

nuxt.config.js or nuxt.config.ts

module.exports = {
  trailingSlash: true,
}

This will generate folders for the routes, say, if you have /route, /some_route, /some_route_2, with that option, when doing:
yarn build && yarn export it will generate a folder for each route with an index.html file inside, i.e.

/route/index.html
/some_route/index.html
/some_route_2/index.html

This way these can be served in a static fashion.

[Muhammad Shoaib]

Thanks man, nailed it

[Hamdy Saad]

How could i get index.html and i have nextjs only jacascript ?

[juanpumpkinpie]

Yes this method doesn't works

[Charan Sai V]

It means you not exported. paste it in to package.json scripts

"build": "next build && next export -o build",

run npm run build

[panamacheng]

Hey man, this is not described about the routing with S3/CloudFront. How do you handle the dynamic routing?

[Eli]

Why should I spend so much effort to deploying a static site to aws s3? There are tons of alternatives hosters with one command netlify vercel glitch and more…

[Nick]

S3 is cheap, fast, and simple. A static site is just files on a server and doesn't require a Node run-time. Vercel, Netlify, etc. offer great developer experiences but I think they get pretty expensive at scale. Much more than S3 bucket storage anyways.

[Zenobius Jiricek]

It's only cheap because you're ignoring all the other problems that come with this.

if you're doing a single page exported static site, then this simple example will work for a throw away site that only ever gets deployed once.

the moment you're doing anything serious, you'll want zero-downtime-deployments (some people call this blue/green), multiple routes, automated deployments from github.

Once you realise you need these, you and your manager start thinking about the amount of hours you're putting into this... they don't care about nextjs, all they care about is that they look good to their managers... more frequent deployments, less support calls for errors caused by your lack of zero-downtime.

I think you seriously underestimate the amount of time these problems soak up.

[Nick]

You're absolutely right. next export kills almost all the features nextjs offers. In the Good-Fast-Cheap triangle, static deployments is only cheap.

[Sivarajan]

Hi, Will this next app in the s3 supports Incremental Static Regeneration? Just need your help on it!

[Nick]

I do not believe so. To host on S3 you have to run both next build and next export. You lose a lot of features when you export, including ISR.
nextjs.org/docs/advanced-features/...