使用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标签完成： <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的组件。 我们先导入它： import Link from 'next/link' 然后我们将Link用于包装我们的链接，就像这样：...