页面之间跳来跳去：链接与导航

上一篇结束时的项目，有首页和关于页两个页面。但你发现没有——它们是两座孤岛：想从首页去关于页，只能手动把地址栏改成 /about，全靠"人肉路由"。

真实的网站当然不是这样。淘宝首页点"购物车"就进了购物车，没人会手敲网址。这一篇，我们就给页面之间装上"门"：链接。装完再升级一步，做出你网站的第一个导航栏。

先认识最原始的链接：`<a>` 标签

网页里的链接，HTML 时代就有，长这样：

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

浏览器看到它，就显示成一行可点的文字；点一下，跳转到 href 里写的网址。这是互联网的活化石，上世纪九十年代就有了。

但它有个毛病：点一次链接，整个页面全部重载。就像你在家里换个房间，不是走过去，而是把整栋房子拆了重盖一遍——门、窗、家具全部重来。慢不说，页面状态（比如你滚动到一半的位置）也全丢了。

Next.js 的升级版：`<Link>`

Next.js 给了一个自家的链接组件，用法几乎一样：

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

区别在幕后：点 <Link> 时，页面不整页重载。Next.js 只把"要变的那部分"悄悄换掉——这才是正常的"换个房间"，房子本身不动。效果是：跳转飞快，几乎瞬间完成，滚动位置、页面状态都保留。

这就是"换房间"和"拆房重盖"的区别。规则很简单：

站内跳转（自己项目里的页面互跳），一律用 <Link>；只有跳去别人的网站，才用 <a>。

不用记原理，记住这条口诀就行。第 6 章讲渲染方式时我们会回头把它讲透。

实战：一句话做出导航栏

理论够了，开工。我们要的效果：

首页和关于页顶部，都有一条导航栏
上面有"首页""关于"两个链接，点哪个去哪个

对 Agent 说：

给我的项目加一个导航栏，要求：

显示在首页和关于页的顶部

上面有两个链接："首页"指向 /，"关于"指向 /about

用 Next.js 的 Link 组件，不要用 a 标签

样式简单一点，横向排列就行

Agent 会去改两个 page.tsx（也可能建一个导航栏组件复用——两种做法都对，组件复用是第 5 章的话题，它怎么做都行）。

验收：重点看"快不快"

Agent 完成后，验收这次要带着放大镜，因为这一篇的重点是"无刷新跳转"的手感：

打开 localhost:3000，点导航栏的"关于"——注意两件事:
- 地址栏是不是变成了 localhost:3000/about（路由在工作）
- 切换是不是"嗖"一下就完成，没有白屏、没有转圈（无刷新在工作）
再点"首页"切回来，同样观察一遍。
做个对照实验：把地址栏的网址手动改掉再回车——能感到明显的"闪一下"（整页重载）。两相对比，<Link> 的"无刷新"就体感到了。

如果点击后地址栏变了但页面没变，或者还是整页刷新，把现象描述给 Agent 修（"点了链接整个页面都刷新了，检查是不是用了 a 标签"）。

看一眼导航栏的代码

打开 app/page.tsx（首页），找到导航栏那段，大概是这个样子：

<nav>
  <Link href="/">首页</Link>
  <Link href="/about">关于</Link>
</nav>

老规矩，只认特征：

<Link href="..."> 成对出现，href 里写的就是上一篇学的"门牌号"
<nav> 只是"这里是导航区"的语义标签，没有特殊功能
链接文字就夹在中间，想改文案直接改这里

有没有发现，你已经能"半看懂"页面文件了？第 1 篇时还一脸懵的代码，现在拆开看全是老朋友：文件夹是门牌号，Link 是门，h1/p 是家具。知识的雪球就是这么滚起来的。

新手常问

Q：为什么不直接告诉我原理，光让我"体感到"？

因为"客户端导航"背后的机制（组件复用、局部渲染）涉及第 5、6 章的知识，现在讲只会把你绕晕。先建立直觉——"<Link> 快、不刷新"，等学了组件再回头看原理，水到渠成。

Q：我有很多页面，导航栏要每个页面都复制一份吗？

好问题，这正是 Next.js 里 layout.tsx（布局）要解决的——"所有页面共用的部分"写一次就行。它排在第 5 章组件之后讲更顺，现在先忍一忍复制粘贴（其实 Agent 会帮你处理）。

Q：跳转到别的网站用什么？

用普通的 <a href="https://...">，比如友情链接、扫码跳转。<Link> 只负责站内。

Q：点链接能打开新标签页吗？

能，给 <Link> 或 <a> 加 target="_blank"。但站内导航一般不这么干——用户点导航是想"走过去"，不是想"开一堆标签"。

本篇小结

<a> 标签是原始链接：点一下整页重载，像"拆房重盖"
<Link> 是 Next.js 的升级版：无刷新跳转，快如"换房间"
口诀：站内用 <Link>，站外用 <a>
导航栏 = 一排 <Link>，把孤岛页面连成能走动的房子
验收跳转时盯两点：地址栏变没变、切得快不快

现在你的小站已经"有门有路"了：两个页面、一条导航、点击秒切。

但接下来想加"博客"功能时，会遇到一个新麻烦：文章有几十上百篇，难道要建几十个文件夹？当然不用——下一篇认识 Next.js 路由的另一个大杀器：动态路由，一个模板页面，吃掉无数个网址。