客户端导航

"链接“组件支持在同一 Next.js 应用中的两个页面之间进行客户端导航。

客户端导航意味着_使用JavaScript_进行页面转换，这比浏览器完成的默认导航更快。

以下是验证它的简单方法：

  • 使用浏览器的开发人员工具将 的 CSS 属性更改为 。background``````<html>``````yellow
  • 单击链接以在两个页面之间来回切换。
  • 您将看到黄色背景在页面过渡之间保持不变。

这表明浏览器_未_加载整个页面，并且客户端导航正常工作。

链接

如果您使用了而不是并执行此操作，则在单击链接时将清除背景色，因为浏览器会执行完全刷新。<a href="…">``````<Link href="…">

代码拆分和预取

接Next.js会自动执行代码拆分，因此每个页面仅加载该页面所需的内容。这意味着当呈现主页时，最初不会提供其他页面的代码。

这可确保即使您有数百个页面，主页也能快速加载。

仅加载您请求的页面的代码也意味着页面变得孤立。如果某个页面引发错误，应用程序的其余部分仍将正常工作。

此外，在 Next.js 的生产版本中，每当链接组件出现在浏览器的视口中时，Next.js会自动在后台预取链接页面的代码。当您单击该链接时，目标页面的代码将已在后台加载，并且页面过渡将几乎是即时的！

总结

接下来.js通过代码拆分、客户端导航和预取（在生产环境中）自动优化应用程序以获得最佳性能。

您可以在页面下将路由创建为文件，并使用内置的链接组件。不需要路由库。

您可以在路由文档中的 API 参考中了解有关下一个/链接和路由的常规组件的详细信息。Link

**注意：**如果您需要链接到 Next.js 应用外部的_外部_页面，只需使用不带 .<a>``````Link

如果需要添加属性，例如 ，请将其添加到标记中，_而不是_添加到标记中。下面是一个示例。className``````a``````Link

快速审阅：用户打开浏览器并导航到 。此页面最初加载了什么 JavaScript？your-blog.com/posts/first-post