Nextjs application on Azure static web app routing issue

Question

I have build an Nextjs application which display data from database through an API. The data should be displayed as folder structures. If a row in database is marked as folder then it should be displayed as folder otherwise it should be displayed as file. If I click on folder then an API call is made which displays the files and folders inside it. And Likewise there can be multiple folders or folder within the folders.

The application is hosted as Azure static web app. The issue which I am facing is when I am inside a folder and when I refresh the page, I get 404 error. The issue seems to be related the route configuration. I tried by adding staticwebapp.config.json, fallback route but in this case it redirects to home page.

Ideally it should stay on same page with the folder on which I refreshed the page.

Any guidance on how to setup dynamic route on Nextjs/static web app will be helpfull.

Thanks, Rajesh

Answer 1

As its mentioned in the document:

You can control which requests return the fallback file by defining a filter. In the following example, requests for certain routes in the /images folder and all files in the /css folder are excluded from returning the fallback file.

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  }
}

The example file structure below, the following outcomes are possible with this rule.

├── images
│   ├── logo.png
│   ├── headshot.jpg
│   └── screenshot.gif
│
├── css
│   └── global.css
│
└── index.html

Also refer to this similar discussion here.