Azure 静态 Web 应用程序路由问题上的 Nextjs 应用程序答案

【问题标题】：Nextjs application on Azure static web app routing issueAzure 静态 Web 应用程序路由问题上的 Nextjs 应用程序
【发布时间】：2022-08-23 18:54:30
【问题描述】：

我已经构建了一个 Nextjs 应用程序，它通过 API 显示来自数据库的数据。数据应显示为文件夹结构。如果数据库中的一行被标记为文件夹，那么它应该显示为文件夹，否则它应该显示为文件。如果我单击文件夹，则会进行 API 调用，显示其中的文件和文件夹。同样，文件夹中可以有多个文件夹或文件夹。

该应用程序作为 Azure 静态 Web 应用程序托管。我面临的问题是当我在文件夹中并且刷新页面时，出现 404 错误。该问题似乎与路由配置有关。我尝试添加 staticwebapp.config.json，后备路由，但在这种情况下它重定向到主页。

理想情况下，它应该与我刷新页面的文件夹保持在同一页面上。

有关如何在 Nextjs/静态 Web 应用程序上设置动态路由的任何指导都会有所帮助。

谢谢，拉杰什

【解决方案1】：

正如document 中提到的那样，“您可以通过定义过滤器来控制哪些请求返回回退文件。在以下示例中，对 /images 文件夹中的某些路由和 /css 文件夹中的所有文件的请求将被排除在返回后备文件之外。

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

下面的示例文件结构，使用此规则可能会产生以下结果。

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

【讨论】：