您可以使用next自己的“Link”组件，只需添加“href”，指示屏幕应该滚动到哪个ID。
所有的样式都放在'a'标签中，所以如果你有一个项目列表，它不会生成错误。
例如，在导航栏中输入：

<Link href="#home">
   <a>Home</a>
</Lins>

在这一节中，你要写：

<div id="home"></div>

如果你使用Styled-components，看看这个例子中的样式，因为你可能会看到一个关于'Link'样式的错误，因为他不能有孩子，所以只要把样式放在'a'：

import Link from "next/link";
export const NavLinks = styled(Link)``;

export const Links = styled.a`
 margin-right: 3rem;
 cursor: pointer;
 font-weight: 500;
 color: #3B3B51;
 font-size: 1rem;

&:last-child {
  margin-right:0;
}`;

export const scrollIntoTheView = (id: string) => {
    let element = document.getElementById(id) as HTMLElement;
    if (!element) return;

    element.scrollIntoView({
        behavior: "smooth",
        block: "start",
        inline: "nearest",
    });
};

你可以使用这个函数，它获取HTML元素的id，通过点击一个按钮来调用这个函数。