使用Link在Next.js中链接两个页面

如何在Next.js中链接两个或更多页面的教程

本教程从第一个Next.js教程开始。我们建立了一个包含一个页面的网站：

我想在这个网站上添加第二个页面，一个博客文章列表。它将呈现在/blog目录下，并且暂时只包含一个简单的静态页面，就像我们的第一个index.js组件一样：

保存新文件后，正在运行的npm run dev进程已经能够渲染出页面，而无需重启。

当我们访问URL http://localhost:3000/blog 时，会得到新的页面：

这是终端显示的内容：

现在，URL是/blog取决于文件名以及其在pages文件夹下的位置。

你可以创建一个pages/hey/ho页面，该页面将显示在URL http://localhost:3000/hey/ho 上。

对于URL的目的，文件中的组件名称并不重要。

尝试查看通过服务器加载的页面源代码，你会看到它将/_next/static/development/pages/blog.js列为已加载的捆绑包之一，而不是像主页那样列出/_next/static/development/pages/index.js。这是因为由于自动代码分割，我们不需要捆绑提供主页的捆绑包。只需要提供博客页面的捆绑包。

我们还可以从blog.js中导出一个匿名函数：

export default () => (
 <div>
 <h1>博客</h1>
 </div>
)

或者如果你更喜欢非箭头函数的语法：

export default function() {
 return (
 <div>
 <h1>博客</h1>
 </div>
 )
}

现在，我们有了由index.js和blog.js定义的2个页面，我们可以引入链接。

页面内的普通HTML链接使用a标签完成：

1	<a href="/blog">博客</a>

但是在Next.js中我们不能这样做。

为什么呢？从技术上讲，当然我们可以，因为这是Web，而且在Web上的事情从不会出错（这就是我们仍然可以使用<marquee>标签的原因）。但是使用Next的主要优点之一是一旦页面被加载，到其他页面的过渡非常快，得益于客户端渲染。

如果你使用普通的a链接：

const Index = () => (
 <div>
 <h1>主页</h1>
 <a href='/blog'>博客</a>
 </div>
)

export default Index

现在打开开发者工具，特别是网络面板。当我们第一次加载http://localhost:3000/时，我们下载了所有页面捆绑包：

现在，如果你点击“保留日志”按钮（以避免清除网络面板），然后点击“博客”链接，将发生以下情况：

我们再次从服务器获取了所有这些JavaScript！但是，如果我们已经获取了这些JavaScript，我们就不需要再次获取了。我们只需要获取blog.js页面捆绑包，因为它是页面中唯一新的捆绑包。

为了解决这个问题，我们使用Next提供的一个名为Link的组件。

我们先导入它：

1	import Link from 'next/link'

然后我们将Link用于包装我们的链接，就像这样：

import Link from 'next/link'

const Index = () => (
 <div>
 <h1>主页</h1>
 <Link href='/blog'>
 <a>博客</a>
 </Link>
 </div>
)

export default Index

现在，如果你重试之前的操作，你将看到移动到博客页面时只加载了blog.js捆绑包：

并且页面加载得比以前快得多，标签页上通常的加载小图标甚至都没有出现。然而，如你所见，URL已经改变了。这是与浏览器的History API无缝工作。

这就是客户端渲染的实际效果。

如果你现在点击返回按钮，就什么也没有被加载，因为浏览器仍然处于就绪状态，准备加载/index路由的旧index.js捆绑包。这一切都是自动完成的！

这不是处理Next.js中的链接的唯一方法，但我认为这是最简单的方法。

tags: [“Next.js”, “Link”, “client-side rendering”, “页面链接”, “客户端渲染”]