This content originally appeared on Level Up Coding - Medium and was authored by Guy Hadash
Recently, we at Alpe Audio launched a new service, Example Finder, as part of our efforts to expose more parts of our content creation engine externally.
Using Next.js as our go-to framework for React Apps, we encounter the issue of accessing URLs inside the app, not from the main page.
When refreshing or sending a link to pages like /page1 you’ll get a 403 error.
This is really bad both for usability (sending to friends specific pages) and for SEO (google can’t index the internal pages).
I found this great guide by Mark Biek explaining how to fix it for react js apps. Since we are using Next.js, and things changed a bit since he wrote it we had to do some tweaks. I wrote this for future internal and external reference.
Assuming you already have a react.js website hosted on s3, you need to first change the S3 Routing Rules in S3 bucket -> Properties -> Static website hosting -> Redirection rules.
The new s3 console changes the routing rules format to JSON, so you’ll need to add this (don’t forget to replace myhost.com):
These rules add #!/ as the prefix to the URL in the case of a 403 or 404 error. This solves the react-router issue and now it will load the right page.
Now we would like to remove this prefix from the url for a cleaner solution. You’ll need to edit you _app.js and add:
CloudFront Users
If you use CloudFront the redirect rules won’t work since the service access the bucket directly.
In order to solve it, change the CloudFront origin to the static hosting URL and not the bucket.
Hosting a Next.js App (with routing) on AWS S3 was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Guy Hadash
Guy Hadash | Sciencx (2022-01-06T14:43:23+00:00) Hosting a Next.js App (with routing) on AWS S3. Retrieved from https://www.scien.cx/2022/01/06/hosting-a-next-js-app-with-routing-on-aws-s3/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.