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。
这个有帮助吗？