0

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.

jtim5
  • 21
  • 5
  • I've not tried this with AWS S3 but this happens when you don't set up rewrite rules for your app, in firebase hosting you set up your page rewrites in `firebase.json` file and looks like aws allows you to configure it as well https://docs.aws.amazon.com/AmazonS3/latest/userguide/how-to-page-redirect.html#redirect-requests-object-metadata – M-Raw Jan 21 '22 at 23:05
  • Did you figure this out at all? Could you answer your own question please if you did! Currently stuck on this too. –  Mar 10 '22 at 14:55

2 Answers2

2

I was able to figure this out by adding in the Nextjs webpack config

trailingSlash: true,

I found the answer here: Next.js: How to make links work with exported sites when hosted on AWS Cloudfront?

jtim5
  • 21
  • 5
0

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.

Jason
  • 66
  • 4