如何使 NextJS 中的页面路径不区分大小写

Question

我在pages文件夹下有一个名为about.tsx文件。 所以页面的路径是/about ，我可以通过访问example.com/about来访问该页面。 但是，如果我访问example.com/About ，它将重定向到 404 页面。

我检查了 Nextjs 存储库，似乎这是预期的行为。 因此，是否有一种解决方法可以使路径不区分大小写，以便example.com/About也可以工作并将用户定向到/about页面？

Answer 1

我同意这是 Next.js 的行为，他们只处理确切的页面名称about而不是about & About使用相同的文件page/about.tsx

但解决方案是按照本指南https://nextjs.org/docs/api-reference继续实施主页（例如：about.tsx）并设置其他页面以重定向到该页面（例如：关于 -> 关于） /next.config.js/redirects

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/About',
        destination: '/about',
        permanent: true,
      },
    ]
  },
}

// Set permanent:true for 301 redirect  & clean SEO!