Next.js 如何通过路线预提取功能加快导航速度，以及如何对其进行自定义。
您将学到什么？
在这篇博文中，您将了解 Next.js 中的路由的工作原理、如何针对速度进行优化，以及如何根据自己的需求对其进行自定义。
<Link> 组件
在 Next.js 中，您无需手动设置路由。Next.js 使用基于文件系统的路由，可让您在 ./pages/ 目录内创建文件和文件夹：
如需链接到不同页面，请使用 <Link> 组件，方法与使用旧版 <a> 元素类似：
<Link href="/margherita">
<a>Margherita</a>
</Link>
当您使用 <Link> 组件进行导航时，Next.js 会为您做一些工作。通常，当您点击指向相应网页的链接时，该网页就会下载，但 Next.js 会自动预提取呈现网页所需的 JavaScript。
当您加载包含几个链接的网页时，可能在您点击某个链接时，系统已经提取了该链接背后的组件。这样可以更快地导航到新页面，从而提高应用响应速度。
在下面的示例应用中，index.js 页面使用 <Link> 链接到 margherita.js：
使用 Chrome 开发者工具验证是否已预提取 margherita.js：
1. 如需预览网站，请按查看应用，然后按全屏
。
- 按 `Control+Shift+J`（在 Mac 上，则按 `Command+Option+J`）打开开发者工具。
点击网络标签页。
选中停用缓存复选框。
重新加载页面。
加载 index.js 时，Network 标签页显示 margherita.js 也已下载：
自动预提取的运作方式
Next.js 仅预提取视口中显示的链接，并使用 Intersection Observer API 进行检测。当网络连接缓慢或用户开启了 Save-Data 时，它还会停用预提取。根据这些检查，Next.js 会动态注入 <link
rel="preload"> 标记，为后续导航下载组件。
Next.js 只会提取 JavaScript，而不会执行 JavaScript。这样，在您访问链接之前，它不会下载预提取的网页可能请求的任何其他内容。
避免不必要的预提取
为避免下载不必要的内容，您可以将 <Link> 上的 prefetch 属性设置为 false，从而针对很少访问的网页停用预提取功能：
<Link href="/pineapple-pizza" prefetch={false}>
<a>Pineapple pizza</a>
</Link>
在第二个示例应用中，index.js 页面有一个设为 pineapple-pizza.js 的 <Link>，并将 prefetch 设置为 false：
如需检查网络 activity，请按照第一个示例中的步骤操作。加载 index.js 时，开发者工具 Network 标签页会显示 margherita.js 已下载，但 pineapple-pizza.js 并未下载：
使用自定义路由预提取
<Link> 组件适用于大多数用例，但您也可以构建自己的组件来执行路由。Next.js 可通过 next/router 中提供的路由器 API 轻松做到这一点。如果您想在导航到新路由之前执行某项操作（例如，提交表单），可以在自定义路由代码中定义。
使用自定义组件进行路由时，也可以为其添加预提取功能。如需在路由代码中实现预提取，请使用 useRouter 中的 prefetch 方法。
以此示例应用中的 components/MyLink.js 为例：
预提取在 useEffect 钩子内完成。如果 <MyLink> 上的 prefetch 属性设置为 true，则在渲染该 <MyLink> 时，系统会预提取 href 属性中指定的路线：
useEffect(() => {
if (prefetch) router.prefetch(href)
});
点击该链接后，路由会在 handleClick 中完成。消息会记录到控制台中，并且 push 方法会导航到 href 中指定的新路由：
const handleClick = e => {
e.preventDefault();
console.log("Having fun with Next.js.");
router.push(href);
};
在此示例应用中，index.js 页面包含一个指向 margherita.js 和 pineapple-pizza.js 的 <MyLink>。prefetch 属性设置为 /margherita 上的 true，在 /pineapple-pizza 上设置为 false。
<MyLink href="/margherita" title="Margherita" prefetch={true} />
<MyLink href="/pineapple-pizza" title="Pineapple pizza" prefetch={false} />
加载 index.js 时，Network 标签页显示 margherita.js 已下载，pineapple-pizza.js 并未下载：
点击任一链接后，控制台都会记录“Happy with Next.js.”（享受 Next.js 的乐趣）并导航到新路由：
总结
当您使用 <Link> 时，Next.js 会自动预提取呈现链接网页所需的 JavaScript，以便更快地导航到新网页。如果您使用的是自定义路由，则可以使用 Next.js 路由器 API 自行实现预提取。通过针对很少访问的网页停用预提取功能，避免不必要地下载内容。