Menu
Summary
I'm trying to setup Next.js with static website hosting on S3 and CloudFront. For the most part it works but I'm having trouble with dynamic routes.
My directory structure looks like this.
pages/
index.js
about.js
[id].js
Currently my Next.js config is set to trailingSlash: true so when I run next build && next export my exported static files look like this.
out/
index.html
about/
index.html
[id]/
index.html
This means that when I visit "123456.cloudfront.net" or "123456.cloudfront.net/about/" the correct index.html is displayed. However when I visit "123456.cloudfront.net/1/", I obviously get an error message instead of out/[id]/index.html.
Caveats
The id pages are added, removed and updated regularly, so I don't want to generate them at build time using getStaticProps and getStaticPaths.
Solutions I've considered
out/index.html in the hopes that it would load the home page, run the JavaScript, recognise the path and end up showing the correct [id] page but it just stays on the home page.Am I missing something?
851
Fortunately, Amazon CloudFront can serve both types of content, to reduce latency, protect your architecture, and optimize costs. In this post, we demonstrate how to use CloudFront to deliver both static and dynamic content using a single distribution, for dynamic and static websites and web applications.
I have been using next js + S3+ cloudfront. Just by configuring correctly and exporting to S3, in turn exposing to cloudfront has no issues whatever. But the problem I am facing is big in terms of navigation, mostly with site refresh which is because next js, whether it is router push or next Link, it appends trailing slash at end of URL like this:
AWS S3 is one of the options which provides a low cost and highly reliable static website hosting solution. These static sites have only CCS, HTML, JS files, fonts, etc. In this post, we can see how we can build a static website with Vue and host that with the AWS S3.
Configuring your S3 bucket as a static website requires three steps: 1- Disable Block Public Access settings. 2- Add a Bucket Policy that grants public read access. 3- Enable bucket Static website hosting.
For the single-page applications, all you need to do is to load the initial index.html. Once you load the index.html the Next.js framework kicks in and do the rest of the job like loading components, calling API calls, etc. What if there are no backend calls and you want to build a static website with Next.js?
After doing some more reading into this, I realised that serverless next.js is basically aimed at solving this same problem. It hosts your Next.js app in an s3 bucket and then uses a combination of CloudFront behaviours and Lambda@Edge to route your requests to the correct place.
It also includes support for a lot of other Next.js features, so it looks like that's the way to go for now.
191
After more than a year of keeping with my ego to host it purely with S3 and cloudfront, I have moved to Vercel. If your site has a large number of pages say a product listing, then for SEO and performance you have to have ISG (Incremental Static Generation) and you can not do that with pure S3 and Cloudfront combination. We fought hard and it seemed like our engineering was going to build a product like vercel rather than own product development. So finally pulled the plug and moved.
NOTE: I do not work for vercel, and this is just a revelation after 1.5 years of S3 + Cloudfront + LambdaEdge based struggling, and live was easy after that.
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
