如何在 Next.js 中为同一页面使用不同的路由？

Question

Next.js manages routing from the /pages folder, but I would like to use two different routes for a same component.

I want to have an /about route and a /a-propos route that both render the component in the about.js file.

mywebpage.com/about         To show -> pages/about/index.js

and

mywebpage.com/a-propos      To show -> pages/about/index.js

Is there an official way of achieving that?

Answer 1

I'd refactor your page component into a more general component directory, add a folder called a-propos to your /pages directory and then reference the general component from both /pages/about/ and /pages/a-propos .

If you want to intercept routing requests and do something more exotic, take a look at the docs for useRouter

Answer 2

The official way to do this is with rewrites:

NextJS Rewrites

module.exports = {
  async rewrites() {
    return [
      {
        source: '/a-propos',
        destination: '/about',
      },
    ]
  },
}