Next.js 中 Link 的正确使用方式

在使用 Next.js 开发时，页面跳转有两种常见方式：

原生 <a> 标签 或 UI 库内置的 <Link>（例如 MUI、HeroUI 提供的 Link 组件）
Next.js 官方提供的 next/link

这两者在用户体验和应用行为上有很大区别。

1. 原生 `<a>` 或 UI 库 `<Link>`

示例：

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

或者：

import { Link } from "@heroui/react";

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

特点：

点击后浏览器会发起 完整的页面请求
React 应用会被卸载并重新挂载
全局状态、SWR/React Query 缓存会丢失
适合跳转到外部站点

2. Next.js `next/link`

示例：

import Link from "next/link";

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

特点：

使用 客户端路由跳转（SPA 导航）
不会触发整页刷新
全局状态和缓存会保留
页面切换更快，体验更流畅
适合应用内路由跳转

3. 如何结合 UI 库样式与 `next/link`

很多 UI 库的 <Link> 组件主要提供样式，可以与 next/link 结合：

import Link from "next/link";
import { Link as UiLink } from "@heroui/react";

<UiLink as={Link} href="/about">
  关于我们
</UiLink>

这样既能保留 UI 库的样式，又能享受 Next.js SPA 导航的好处。

4. 对比表格

特性	`<a>` / UI 库 `<Link>`	`next/link`
页面跳转方式	整页刷新（服务器请求）	客户端路由（SPA）
React 应用是否重挂载	✅ 会	❌ 不会
全局状态/缓存是否保留	❌ 丢失	✅ 保留
页面切换速度	较慢	快速（无需完整刷新）
适用场景	外部站点跳转	应用内部路由跳转
是否推荐用于站内导航	❌ 不推荐	✅ 强烈推荐

5. 最佳实践示例

在实际项目中，推荐用 next/link 作为导航的基础，同时结合 UI 库样式：

import Link from "next/link";
import { Link as UiLink } from "@heroui/react";

export default function NavMenu() {
  return (
    <nav className="flex gap-4">
      {/* 使用 Next.js 的客户端路由 */}
      <Link href="/" className="text-blue-600 hover:underline">
        首页
      </Link>

      {/* 保留 UI 库样式，同时使用 next/link 导航 */}
      <UiLink as={Link} href="/about">
        关于我们
      </UiLink>

      {/* 外部站点跳转，仍然用 <a> */}
      <a href="https://example.com" target="_blank" rel="noopener noreferrer">
        外部网站
      </a>
    </nav>
  );
}

6. 总结

站内跳转 → 一律用 next/link
外部链接 → 使用 <a> 或 UI 库提供的 <Link>
如果需要 UI 样式，推荐用 UI Link + next/link 的组合方式。

👉 最佳实践：在 Next.js 项目中，始终优先使用 next/link 处理应用内的页面跳转。

本文由萧兮的博客原创发布，欢迎转载，转载务必保留原文链接。

萧兮的博客：https://www.20010515.xyz · 原文：https://www.20010515.xyz/posts/5e848851-32c7-439e-a951-6abf53860806