1

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?

juliomalves
  • 42,130
  • 20
  • 150
  • 146
David Solsona
  • 43
  • 5
  • Just make the index.js file in a seperate folder (like container) and use it in both pages (about.js and a-propos.js) – Hariwarshan May 12 '21 at 16:44

2 Answers2

0

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

serraosays
  • 7,163
  • 3
  • 35
  • 60
0

The official way to do this is with rewrites:

NextJS Rewrites

module.exports = {
  async rewrites() {
    return [
      {
        source: '/a-propos',
        destination: '/about',
      },
    ]
  },
}
Teej
  • 12,764
  • 9
  • 72
  • 93