DEV Community

How to deploy static Next.js to AWS S3

Christophe Parmentier on November 24, 2020

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 j...
Collapse
 
ugorji_simon profile image
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

Collapse
 
egemon profile image
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.

Collapse
 
anoopchauhan profile image
Anoop Chauhan

Hi, have you found any workaround for multiple routes deployment

Collapse
 
egemon profile image
Illia Lukianov

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

Collapse
 
arcanemastermind profile image
Arcane Mastermind • Edited

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

nuxt.config.js or nuxt.config.ts

module.exports = {
  trailingSlash: true,
}
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
nafeezabrar profile image
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!

Collapse
 
hamdysaad20 profile image
Hamdy Saad

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

Collapse
 
charansaiv profile image
Charan Sai V

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

"build": "next build && next export -o build",
Enter fullscreen mode Exit fullscreen mode

run npm run build

Collapse
 
juanpumpkinpie profile image
juanpumpkinpie

Yes this method doesn't works

Collapse
 
shoaib7889 profile image
Muhammad Shoaib

Thanks man, nailed it

Collapse
 
qurus profile image
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…

Collapse
 
ajanick3 profile image
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.

Collapse
 
airtonix profile image
Zenobius Jiricek • Edited

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.

Thread Thread
 
ajanick3 profile image
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.

Collapse
 
panamacheng profile image
panamacheng

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

Collapse
 
citysiva180 profile image
Sivarajan

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

Collapse
 
ajanick3 profile image
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/...