客户端导航

"链接“组件支持在同一 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