In React, we often use React Router Dom to establish routes by defining specific paths. However, I'm currently working with Next.js and facing a navigation challenge. I aim to create a navigation system where, upon clicking a button or anchor, the user seamlessly moves to a section within the same page. The catch is, I cannot use the traditional id anchoring approach, as I require custom paths without the hash symbol in the URL.

To elaborate further, currently, using the hash symbol (#), I have something like this:

<a href="#mysection">Click here</a>
<mysection id='mysection' />

Upon clicking, the URL transforms from www.mybusiness.com.br/ to www.mybusiness.com.br/#mysection. However, my goal is to achieve URLs like www.mybusiness.com.br/mysection for each section, similar to how we structure paths when creating new pages in the app directory.

For instance, a navigation hierarchy could look like this:

Home > About us > Section 4

Resulting in a URL like www.mybusiness.com.br/about-us/section-4.

In React, I've used routers to accomplish this with custom paths. How can I achieve the same in Next.js, enabling a clean and intuitive URL structure for sections within the same page?