Nextjs routes result in 404 on refresh when hosted on S3

Question

I am a bit baffled by this. Following the simplest Nextjs on AWS S3 demos result in a an app that can only load index.html.

You upload you files to S3. The index.html will load. If you navigate through a link to another route, say /test, the page will load. Then hit refresh, and it results in a 404. How can this be fixed? Have anybody seen this before, I am not sure how I got this wrong because I was following pretty basic instructions.

sample demo: https://medium.com/bb-tutorials-and-thoughts/how-to-build-a-next-js-static-website-with-aws-s3-643ff55261ac

Note: I have tried this with 4+ demos all with the same result.

Answer 1

With using S3, you'll have to write routing rules to link to other pages. There are a few hacks. Routing all errors to index.html. Create duplicate paths that s3 can understand.

Caveat: There are many features you'll have to keep working around (not just the ones listed by Vercel) that will keep propping up. The folks at serverless-nextjs wrote many of the features you'd might have to if you stick with S3.