NextJS 可选捕获部署时所有路由不起作用答案

【问题标题】：NextJS Optional catch all routes not working when deployedNextJS 可选捕获部署时所有路由不起作用
【发布时间】：2021-10-19 11:41:35
【问题描述】：

我们有一个项目，其中包含一个动态路由 [productId]，在此页面内，我们还有几个其他页面，其中包含可选的包罗万象的路由。这是 pages 文件夹的结构：

[productId]
  contentOne
    [[...slugOne]]

问题是，只要页面是静态生成的，可选的 catch-all 就不能正常工作。前任： productId/contentOne 不起作用，但 productOne/contentOne/extra 起作用只有在vercel中部署时才会出现该问题。所有路线都在本地完美运行。

这里是 getStaticPaths：

export async function getStaticPaths() {    
  return {    
    paths: [],    
     fallback: true,    
   }    
 }

这里是 getStaticProps：

export async function getStaticProps({ locale }) {
  return {
    props: {
      test: 'test',
      ...(await serverSideTranslations(locale, ['common'])),
    }
  }
}

【问题讨论】：

标签： next.js react-i18next nextjs-dynamic-routing

【解决方案1】：

使用getStaticPaths 生成页面时，设置{ fallback: true } does not result in a 404。在开发过程中，它之所以有效，是因为开发使用了 Automatic Static Optimization 的版本，其中 Next 提供服务器呈现的站点，即使页面将是静态的。

如果您使用 Next 运行 SSR 站点，则设置 fallback 将提供一个带有空道具的静态页面。这是预期的行为（如果您遇到这种情况），您有责任通过重定向客户端或显示您自己的 404 类型或缺少内容的页面来处理该页面。

如果您使用next export 来构建和导出您的页面，那么设置fallback 没有任何作用（使用next export 时的预期行为）这意味着该页面将不存在并且您的服务器应该处理404，通过提供 404 错误页面或将用户重定向到其他地方。

我不确定您所说的“不起作用”是什么意思 - 它是给您一个 404 错误还是一个空白页面？不管怎样，以上就是原因。

【讨论】：

对不起。是的。我们在产品中得到 404。我们使用的是 ISR，而不是下一个出口，对于标准路线，这具有“即时”构建的效果，这正是我们想要的。但是，对于上述路由策略，如果我们预先构建，页面可以正常工作，但是对于我们没有预先构建的路由，它们不会在 prod 中即时构建，只需提供 404 客户端即可。
顺便说一句。我与原始海报合作，因此冒昧代表他发表评论:)
这个链接是预建的并且可以工作：staging.ttwithme.com/primrose/social 这个不是预建的并且失败了：staging.ttwithme.com/expjazzandrade/social。在本地，两者都有效
“不起作用”我的意思是 404。抱歉一开始不清楚。所以，我们有一个空页面进行测试，页面返回404。链接：staging.ttwithme.com/dummy/test
@ExpeditoAndrade 我正面临这个问题，但我使用的是 fallback: 'blocking' 而不是 fallback: true。你找到解决方案了吗？

【解决方案2】：

我们对此有一个未解决的问题：https://github.com/vercel/next.js/issues/30631

同时，我们不得不使用重写（这进入 next.config 文件）：

async rewrites() {
return {

  beforeFiles: [

   {
     source: '/:productId/contentOne',
     destination: '/:productId/contentOne/index'
   }
  ]
}

【讨论】：