Hosting a SPA on Azure Static Web Apps

I'm currently dabbling a little with React and also Azure to learn some new things. In this case how to set up a single page application on Azure's Static Web Apps service.

This is mostly very straight forward if you have dedicated files for all your routes, which Next.js does create. But if you're also working with catch-all routes for like a blog or a website with a CMS where you're loading pages and content on access, you'll get a 404 from Azure.

After some research I found out, one can actually create a config file for the Static Web Apps service as documented in the Microsoft Docs. There it's also stated on how to configure a fallback route in the staticwebapp.config.json file which I adapted for my use case with the dynamic pages as follows:

{
    "navigationFallback": {
        "rewrite": "/[slug].html",
        "exclude": [
            "/_next/*",
            "/assets/*",
            "/favicon.ico"
        ]
    }
}

With this config Azure does the rewrite for you and no 404's occur anymore. At least on Azure's side of things ;)