How to use Links with custom routes that come from CMS?

[emmanuelolivo1002]

My project folder structure is like this:

• /pages
  • /hotels
    • [id].js
  • hotels.js

And I want to use pretty urls so on my next.config.js file I added this:

module.exports =  {
  async rewrites() {
    return [
      {
        source: "/hotels-on-the-beach",
        destination: "/hotels",
      },
    ];
  },
});

Basically what I want to do is use the Link component from next/link to go the correct files whenever I get a URL from my CMS. So the following component should go to the /pages/hotels page like so:

// linkObj = {
//   label: "Hotels on the Beach",
//   url: "/hotels-on-the-beach/",
// }

<Link href={linkObj.url}>
    <a>{linkObj.label}</a>
</Link>

But for some reason when I do this approach my app does a reload of the site. I previously was able to achieve this successfully with next-routes but wanted to moved out of it since it seems it's no longer being supported.