NextJS Optional 捕获所有部署时不工作的路由

Question

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

[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'])),
    }
  }
}

Answer 1

当使用 getStaticPaths 生成页面时，设置 { fallback: true } does not result in a 404. During development, it works because development uses a version of Automatic Static Optimization Next 将提供服务器呈现的站点，即使页面将是静态的。

如果您是运行具有 Next 的 SSR 站点，则设置 fallback 将提供一个带有空属性的静态页面。这是预期的行为（如果这是您正在发生的事情），您有责任通过重定向客户端或显示您自己的 404 类型或缺失内容页面来处理该页面。

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

我不确定您所说的“不起作用”是什么意思 - 是给您 404 错误还是空白页？无论哪种方式，以上就是原因。

Answer 2

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

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

async rewrites() {
return {

  beforeFiles: [

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

NextJS Optional 捕获所有部署时不工作的路由

NextJS Optional catch all routes not working when deployed

next.js

react-i18next

nextjs-dynamic-routing