这是我参与「第五届青训营」伴学笔记创作活动的第 8 天

在页面之间导航

到目前为止，我们创建的 Next.js 应用只有一个页面。网站和 Web 应用程序通常有许多不同的页面。
让我们探讨如何向应用程序添加更多页面。

您将在本课中学到什么

在本课中，您将：

使用集成文件系统路由创建新页面。
了解如何使用 Link 组件在页面之间启用客户端导航。
了解对代码拆分和预取的内置支持。

Next.js新目录

在 Next.js 中，页面是从 pages目录中的文件导出的 React 组件。
页面根据其文件名与路由相关联。例如，在开发中：

pages/index.js与路由相关联。/
pages/posts/first-post.js与路由相关联。/posts/first-post

我们已经有了文件，所以让我们创建以查看它是如何工作的。pages/index.jspages/posts/first-post.js

创建新页面

在 pages下创建posts目录。
创建一个在目录posts中调用的文件，其中包含以下内容：first-post.js

export default function FirstPost() {   return <h1>First Post</h1>; }

组件可以具有任何名称，但必须将其导出为导出。default
现在，确保开发服务器正在运行并访问 http://localhost:3000/posts/first-post。您应该会看到以下页面：

这是您在Next.js中创建不同页面的方法。
只需在 pages目录下创建一个 JS 文件，该文件的路径就变成了 URL 路径。
在某种程度上，这类似于使用 HTML 或 PHP 文件构建网站。不是写HTML，而是写JSX并使用React Components。
让我们添加一个指向新添加页面的链接，以便我们可以从主页导航到它。

链接组件

在网站上的页面之间链接时，您可以使用 HTML 标记。
在 Next.js 中，可以使用组件 next/链接在应用程序中的页面之间进行链接。允许您执行客户端导航并接受使您能够更好地控制导航行为的道具。Link

用

首先，打开，并通过在顶部添加以下行从 next/link 导入组件：pages/index.jsLink

import Link from 'next/link';

然后找到如下所示的标签：h1

<h1 className="title">   Welcome to <a href="https://nextjs.org">Next.js!</a> </h1>

并将其更改为：

<h1 className="title">   Read <Link href="/posts/first-post">this page!</Link> </h1>

接下来，打开其内容并将其替换为以下内容：pages/posts/first-post.js

import Link from 'next/link'; export default function FirstPost() {   return (     <>       <h1>First Post</h1>       <h2>         <Link href="/">Back to home</Link>       </h2>     </>   ); }

如您所见，该组件类似于使用标记，但不是，而是使用。Link

客户端导航

Link 组件支持在同一 Next.js 应用中的两个页面之间进行客户端导航。
客户端导航意味着_页面转换使用 JavaScript_ 进行，这比浏览器完成的默认导航更快。
以下是验证它的简单方法：

使用浏览器的开发人员工具将的 CSS 属性更改为。backgroundyellow
单击链接可在两个页面之间来回切换。
您将看到黄色背景在页面过渡之间持续存在。

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

如果您使用了而不是这样做，则在单击链接时将清除背景颜色，因为浏览器会完全刷新。

代码拆分和预取

接下来.js会自动拆分代码，因此每个页面仅加载该页面所需的内容。这意味着当呈现主页时，最初不会提供其他页面的代码。
这可确保即使您有数百个页面，主页也能快速加载。
仅加载您请求的页面的代码也意味着页面将被隔离。如果某个页面引发错误，应用程序的其余部分仍然可以工作。
此外，在 Next.js 的生产版本中，每当 Link 组件出现在浏览器的视口中时，Next.js 都会在后台自动预取链接页面的代码。当您单击链接时，目标页面的代码已经在后台加载，页面转换将几乎是即时的！

总结

接下来.js通过代码拆分、客户端导航和预取（在生产中）自动优化应用程序以获得最佳性能。
您可以在页面下将路由创建为文件，并使用内置的链接组件。不需要路由库。
您可以在路由文档中的 next/link和路由的 API 参考中了解有关Link组件的更多信息。

Next.js (2) | 青训营笔记