NextJS中Link组件href自动添加localhost，如何保留锚点#contact？

原因 #

Next.js 的 Link 组件默认会将 href 属性解析为绝对 URL，即便你传入的是纯锚点 #contact，它也会自动拼接当前页面的基础域名（比如 http://localhost:3000/）生成完整路径。这种设计是为了统一处理路由跳转逻辑，但对于仅需页面内锚点滚动的场景，会干扰原生锚点行为，导致无法正常滚动到目标元素。

解决方法 #

1. 直接使用原生 <a> 标签（最简便） #

如果只是需要页面内锚点滚动，不需要 Next.js 的路由跳转能力，直接用原生 HTML 标签替代 Link 组件即可：

<a href="#contact">联系我们</a>

这样生成的 href 就是纯 #contact，点击后会原生触发滚动到页面内 id="contact" 的元素。

2. 自定义点击事件（保留 Link 组件样式） #

如果想保留 Link 组件的样式或其他特性，可以手动阻止默认路由跳转，实现自定义锚点滚动：

import Link from 'next/link';

const handleAnchorScroll = (e) => {
  e.preventDefault();
  const targetElement = document.getElementById('contact');
  targetElement?.scrollIntoView({ behavior: 'smooth' });
};

<Link href="#contact" onClick={handleAnchorScroll}>
  联系我们
</Link>

注：此方法在 Next.js 12 及之前的 Pages Router 中适用，App Router 中可结合 scroll 属性调整。

3. App Router 下的配置（Next.js 13+） #

使用 App Router 时，可通过 as 属性指定显示的锚点格式，并启用 scroll 确保滚动行为：

import Link from 'next/link';

<Link href="#contact" as="#contact" scroll={true}>
  联系我们
</Link>

这种方式会让生成的 <a> 标签显示 href="#contact"，同时触发原生锚点滚动。

内容的提问来源于stack exchange，提问作者Beres