NextJS Pages Router 下的多语言也有 Bug

今天折腾 NextJS 又遇到很恶心的问题了，还是加入多语言才会出现的。前 App Router 的多语言有 404 页面无法自定义的问题，现在 Pages Router 的多语言加上中间键还会有 307 跳转死循环的问题...

大致情况就是一个页面使用了 getStaticPaths 和 getStaticProps，其中 getStaticProps 检测到路由参数不符合条件时返回 { notFound: true } 对象，表示页面应该显示成 404，实际上却变成 307 跳转，目标还一直是它自己。

export default function middleware(request: NextRequest) {
  if (request.nextUrl.locale === "default") {
    ...

    return NextResponse.redirect(
      new URL(
        `/${locale}${request.nextUrl.pathname}${request.nextUrl.search}`,
        request.url,
      ),
    );
  }
}

跳转的原因我是找到了，是中间件里面检测到语言未匹配时才会跳转。NextJS 中间键的文档说明，中间键的优先级比页面路由高，地址栏携带语言标识时理论上不会走中间键的跳转，但前面使用了 getStaticPaths 和 getStaticProps 的时候明显是未匹配到语言，最终走了中间键的跳转，所以这种情况到底算 Bug 还是不算呢？

我想试试之前在 App Router 下的经验，就是截取 Path 的第一级来判断是否携带语言标识，结果 Pages Router 下的中间件完全不认，访问 /zh-Hans/faq/about-this-product 直接返回的是 /faq/about-this-product，就给我整懵逼了。

继续调整其他 SEO 问题，有个需要更正 og:url 标签的需求，需要通过 getServerSideProps 获取实际请求路径，结果发现前面使用 getStaticProps 产生的这个 Bug 被意外修复了，真是好巧不巧，不过问题最终被解决了就好！

2024-07-18