Next.js 静态路径在本地工作但在 Azure 部署上返回 404

Question

在 Azure 中使用免费托管计划。

我正在使用 getStaticPaths 和 getStaticProps 等 Next.js 功能通过预渲染页面来优化我的 Web 应用程序。该应用程序在本地完美运行，但当使用免费的静态 Web 应用程序帐户部署到 Azure 时，特定的动态路由会返回 404 错误。

这是我如何在应用程序中使用 getStaticPaths 和 getStaticProps 的简化示例：

    export async function getStaticPaths() {
    return {
        paths: [
            { params: { id: 'rice' } },
            { params: { id: 'okele' } },
            // more paths...
            { params: { id: 'beers' } }
        ],
        fallback: false
    };
}

export async function getStaticProps({ params }) {
    const menuData = await API.fetchMenu();
    const categoryData = menuData.Categories.find(item => item.CategoryName.toLowerCase() === params.id);

    return {
        props: {
            category: categoryData,
        },
        revalidate: 3600  // ISR
    };
}

Azure 上的构建输出表明 /menu/[id] 下的所有页面均已正确生成：

├ ● /menu/[id] (ISR: 3600 Seconds) (2532 ms)
├   ├ /menu/rice (592 ms)
├   ├ /menu/okele
├   └ [+5 more paths]

尽管如此，导航到domain.com/menu/rice 或 /menu/[id] 下的任何其他指定路径都会导致 404 错误，而 /contact 或 /more/faqs 等其他路径则可以正常工作。

问题：

为什么这些路径仅在部署在 Azure 上时才返回 404，尽管在本地工作并且构建日志指示页面生成成功？

这是否与 Azure 对静态路径的处理或 Azure 静态 Web 应用程序上的 Next.js 应用程序所需的特定配置有关？

是否有专门解决 Azure 平台上的 Next.js 动态路由的已知问题或解决方法？

任何有关解决此问题的见解或建议将不胜感激。

更新： 我添加了一个 staticwebapp.config.json 文件，而我之前的项目中没有该文件。这就是它的样子：

{

“路线”：[ { “路线”：“/菜单/*”， "服务": "/menu/[id].html", “状态代码”：200 } ] }

动态根在部署到 Azure 时不起作用，但它仍然在我的本地计算机上运行。

Answer 1

使用

API.fetchMenu()

获取数据需要后端服务器或无服务器函数来执行脚本获取数据。除非您使用无服务器功能，否则这在静态网络应用程序中是不可能的。

这对我有用。 这就是我使用动态路由的方式，传递 Id 的值并更新它。

我部署了一个静态 Web 应用程序。

我的目录：

[id].js

:

import { useRouter } from 'next/router';

export default function MenuItem() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Hello, {id}!</h1>
      <p>This is the {id} page.</p>
    </div>
  );
}

OUTPUT

：

注意：-请务必使用

"engines": {
"node": ">=18.0.0"
},

在您的

package.json

文件中，如果您的应用程序需要特定版本的节点