Azure static site on storage account, all paths other than index return a 404

Question

I've seen many similar issues on this topic and most of the fixes are more geared toward a SPA like react, angular, etc.

For our app we have used Next.js but probably irrelevant for the issue here. We build and export just static files (html, css, js, fonts, images) and then upload to the storage/cdn.

Basic folder structure

 |- _next
   chunk.js
   style.css  

 |- blogs
   blog1.html
   blog2.html
   ...
 |- images 
   ...

 about.html
 index.html
 others...

Currently when you go to the homepage it loads as expected (assume b/c since we explicitly set this to index.html in the setup on azure storage) and you can navigate around no issue.

However, if you try to go directly to some route (ex. oursite.com/about) it will throw a 404. If you append the .html to the end then it works as expected.

I've thought about trying to add a rule in the Rules Engine to check if there is a file extension and if not add the .html. But this seems like like a less than ideal solution when I feel like we're using this service exactly as it's intended.

Anyone else ran into this and found a better solution? Thanks!

Answer 1

I'll leave this open in case anyone has a more general solution or a good version of a Rule that would have worked here.

Our fix ended up being to use Nextjs' build setting trailingSlash: true which puts each jsx file in /pages into a folder of its name and then the content inside an index.html.

Again this is when using next build && next export to build a static version of your site.

Works well for us so far with only 1 line of code change