nextjs taking me to a new page with links

Right now I'm trying to make it so that when I click on the text on the navbar it'll scroll down to the section in nextjs. I have the following code:

 <Link href="#About">About</Link>
 <Link href="#Sponsors">Sponsors</Link>
 <Link href="#FAQ">FAQ</Link>

This is the navbar, when I click about sponsors for example i want to go down to the page to sponsors

Where about, sponsors, and faq are sections on the page as you can see here:

So this is working but it OPENS A NEW TAB which I don't want. I want it to scroll down to where sponsors is.

S开发者_高级运维ome information: Sponsor About and FAQ are their own components that I want to scroll to

you need to have all your Sponsors, About, FAQ components in for example "home.jsx" and they must have the id of "Sponsors", "About", "FAQ" now you can use

<a href="#Sponsors"/>
<a href="#About"/>
<a href="#FAQ"/>

to make the page to scroll to the section you want. but if you want to render each component in different url you cannot use this method and you must use nextjs <Link> to go to the other page like

http://localhost:3000/Sponsors
http://localhost:3000/Sponsors
http://localhost:3000/Sponsors