原始文档位于https://github.com/developerw...现在移动到这里。学习Next.js：入门学习Next.js：在页面之间导航学习Next.js：使用共享组件学习Next.js：创建动态内容学习Next.js：使用路由掩码创建干净的URL学习Next.js：服务器支持清理URL学习Next.js：获取数据学习Next.js：在页面之间部署导航现在我们知道如何创建Next.js应用程序并运行它。我们的示例应用程序只有一个简单的页面，但您可以根据需要添加更多页面。例如，您可以创建一个“关于”页面并将内容添加到pages/about.js.exportdefault()=>{
}然后，我们可以打开http://localhost:3000/about来访问这个页面。那么我们需要链接这些页面，使用HTML“a”标签，但是它不执行客户端导航，它执行服务器端导航，这不是我们想要的。为了支持客户端导航，我们需要使用Next.js的LinkAPI，通过next/link导出。让我们看看如何使用它。设置为了学习本课程，您需要有一个示例Next.js应用程序。为此，您可以下载下面的应用程序作为学习案例：gitclonehttps://github.com/arunoda/learnnextjs-demo.gitcdlearnnextjs-demogitcheckoutgetting-started可以使用以下命令运行：npminstallnpmrundev现在，访问http://localhost:3000/。使用链接现在我们将使用next/link来链接我们的页面。将以下代码添加到page/index.js模块文件//ThisistheLinkAPIimportLinkfrom'next/link'constIndex=()=>(
)exportdefaultIndex在这个例子中，我们导入next/link作为Link模块并像这样使用它：
AboutPage现在，再次访问http://localhost:3000/，点击点击“关于页面”链接，您将被带到“关于页面”页面。这是客户端导航，行为发生在客户端，无需请求服务器。可以打开浏览器开发工具的网络选项卡，看是否有没有网络请求验证。这里有一个简单的任务：访问http://localhost:3000/点击“关于页面”点击浏览器的后退按钮来描述，点击后退按钮后你看到了什么？是的，客户端导航将您带回索引页面。客户端历史记录支持当你点击后退按钮时，Next.js将你带回到Index页面，这个过程完全由客户端实现；next/link为您处理所有位置。历史相关的事情。您甚至不需要编写一行客户端路由代码。您需要做的只是连接到页面，仅此而已！为连接设置样式大多数时候，我们可能希望为连接添加一些样式。可以这样想：AboutPage添加样式后，会看到样式设置正确了但是,如果你想像下面那样做会怎样？关于页面是的，没有任何影响！连接只是一个高阶组件（HOC：HigherOrderComponent)实际上，style属性对next/link没有影响。因为next/link只是一个高阶主键，可以接收href属性和其他属性。如果要给它设置样式，需要在底部的Components设置样式。使用按钮链接现在，我们需要一个按钮而不是链接，现在我们需要修改我们的导航代码，像这样:使链接任意工作。就像按钮一样，您可以将任何自定义React组件放置在链接中，甚至是div元素。放置在链接中的组件的唯一要求是它能够接受onClick属性。链接很简单，但功能强大。在这里，我们只看到了next/link的一个非常基本的例子。在下一课中，我们将学习更多有关如何使用Link的信息。如果想了解Next.js的路由功能，可以参考Next.js路由文档。
