404 on page refresh with NextJS static site hosted on S3

user_8291795 0
Viewed 780

I have hosted a static NextJS website on amazon S3. The website works fine when the homepage is loaded and then other pages are loaded by nav. But if a particular page(except homepage) is reloaded, the site returns 404.

Also, I have tried putting the error page route back to 'index.html' as suggested on some threads but didn't solve the issue. Instead, after every page refresh, the index page opens.

How do I resolve that when a person is on Page1.html(for example) and he his refresh, Page1.html loads not the homepage.

devops next.js reactjs amazon-web-services amazon-s3
1 Answers

The right way to go is to add an error fallback to index.html in the S3 bucket's static web hosting configuration.

The reason of this is when a URL is hit (either by manual input in the browser or a refresh), it sends a request to /list to the S3's root server (the one managed by AWS) before it hits our bucket. That S3 server have no idea if this is a reactjs app or not, so it goes into the bucket to look for the /list in the root of my bucket, which doesn't exist, so it returns the 404 error.

However by adding the error fallback, now when it gets 404, it redirects the request to index.html, where the react app is defined and loaded into. In this case, the /list will go through the normal flow to reach the right router that handles page rendering, problem solved.

user_171663100
Related