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

Question

I have a file under the pages folder named about.tsx . So the path for the page is /about and I'm able to access the page by visiting example.com/about . However, if I visit example.com/About , it will redirect to a 404 page.

I've checked the Nextjs repo, seems like this is the expected behavior. Therefore, is there a workaround that can make the path case insensitive so that example.com/About will also work and direct users to the /about page?

Answer 1

I agree that's Next.js's behavior, they only handle exact page name about instead of both about & About using the same file page/about.tsx

But the solution is you keep implementing a main page (eg: about.tsx) and setup other pages to redirect to that page (eg: About -> about) following this guide https://nextjs.org/docs/api-reference/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!