8
章节8
客户端导航
Link 组件可在同一 Next.js 应用的两个页面之间实现客户端导航。
客户端导航意味着页面过渡通过 JavaScript 完成，这比浏览器默认的导航速度更快。
下面是一种简单的验证方法：
- 使用浏览器的开发工具将
<html>的backgroundCSS 属性更改为yellow。 - 点击链接在两个页面之间来回切换。
- 你会看到黄色背景在页面过渡之间持续存在。
这表明浏览器没有加载整个页面，并且客户端导航正在工作。
如果你使用 <a href="…"> 而不是 <Link href="…"> 并这样做，背景颜色将在点击链接时被清除，因为浏览器会进行完全刷新。
代码分割和预加载
Next.js 会自动进行代码分割，因此每个页面只加载该页面所需的代码。这意味着当首页渲染时，其他页面的代码最初不会被提供。
这确保了即使你有数百个页面，首页也能快速加载。
只加载你请求页面的代码也意味着页面是隔离的。如果某个页面出现错误，应用程序的其余部分仍然可以正常工作。
此外，在 Next.js 的生产版本中，每当 Link 组件出现在浏览器的视口中时，Next.js 会自动在后台预加载链接页面的代码。当你点击链接时，目标页面的代码已经加载到后台，页面过渡将几乎是即时的！
总结
Next.js 通过代码分割、客户端导航和预加载（在生产环境中）自动优化你的应用程序，以实现最佳性能。
你可以在 pages 下创建文件作为路由，并使用内置的 Link 组件。不需要路由库。
你可以在 next/link 的 API 参考中了解有关 Link 组件的更多信息，并在 路由文档中了解一般的路由。
注意：如果你需要链接到 Next.js 应用之外的外部页面，只需使用
<a>标签，而无需使用Link。
这有帮助吗？