Next.js项目外部链接：用<Link>还是<a>标签？

Next.js 的 <Link> 组件是专门为内部路由设计的，针对外部链接的处理逻辑和最佳实践，直接结合你的问题梳理如下：

1. 使用 <Link> 处理外部URL的优劣势 #

弊端 #

• 无实际优化效果：<Link> 核心的预加载、客户端无刷新导航等特性仅对内部路由生效，外部链接完全享受不到这些优化，属于多余的包裹。
• 增加理解成本：团队成员看到 <Link> 会默认认为是内部路由，额外的组件包裹会混淆语义，增加代码解读的复杂度。
• 无额外价值：不会带来任何性能或功能提升，反而徒增不必要的代码层级。

优势 #

几乎没有值得提及的实际优势，硬要说的话可能是强行统一代码风格，但这完全得不偿失，远不如保持语义清晰重要。

2. Next.js 对 <Link> 包裹的外部链接的处理逻辑 #

Next.js 会自动识别带有完整协议（如 https://）的外部URL，此时 <Link> 组件会直接退化为原生 <a> 标签，不会启用任何内部路由专属的处理逻辑。

换句话说，你给出的两种方案最终渲染的DOM完全一致，都是：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Visit Example</a>

不存在任何额外的处理差异。

最佳实践总结 #

• 内部路由：必须使用 <Link> 组件，充分利用预加载、无刷新导航等优化特性，比如跳转 /about、/posts/123 这类页面。
• 外部路由：直接使用原生 <a> 标签，同时务必添加 target="_blank" 和 rel="noopener noreferrer"（避免新打开的页面通过 window.opener 控制原页面，防范安全风险）。

示例代码 #

内部路由（正确用法）

import Link from 'next/link';

<Link href="/about">
  关于我们
</Link>

外部路由（正确用法）

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  访问 Example
</a>

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