Next.js是一个新的通用JavaScript框架，它为基于React和服务器的Web应用提供了一个新的可选方案。
Next.js目前已经开源，https://zeit.co/blog/next
现在我们知道如何创建一个简单的Next.js应用并运行它。我们的简单应用只有一个页面，但是我们可以添加任意多的页面。例如,我们可以创建一个“About”页面,将下面的内容添加到 pages/about.js:
export default () => (
<div>
<p>This is the about page</p>
</div>
)
然后我们可以访问那个页面通过 http://localhost:3000/about
在那之后，我们需要连接这些页面。我们可以使用HTML的“a”标签。然而，它不会执行客户端导航;它通过服务器导航到页面，这不是我们想要的。
为了支持客户端导航，我们需要使用Next.js API的Link,这时可以导入 next/link
让我们看看如何使用它。
安装
为了跟上这节课的学习，你需要有一个简单的Next.js应用。为此,继续上一节课的工作，或者下载下面的示例应用程序:
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout getting-started
你可以通过以下命令执行:
你可以用它来运行它:
现在，您可以通过导航 http://localhost:3000/ 来访问该应用程序。
使用Link
现在我们将使用 next/link 来链接我们的两个页面。
将以下代码添加到 page/index.js 中
// This is the Link API
import Link from 'next/link'
const Index = () => (
<div>
<Link href="/about">
<a>About Page</a>
</Link>
<p>Hello Next.js</p>
</div>
)
export default Index
这里我们导入了 next/Link 作为链接，然后使用它:
<Link href="/about">
<a>About Page</a>
</Link>
现在尝试访问 http://localhost:3000/
然后点击“About Page”链接。它将导航你到“About”页面。
这是客户端导航;这个动作发生在浏览器中，不向服务器发出请求。
您可以通过打开浏览器的网络请求检查器来验证这一点。
好了，现在我们有一个简单的任务:
- 访问http://localhost:3000 /
- 然后点击“About Page”
- 然后点击浏览器的后退按钮
你最好如何形容的后退按钮的经验？
客户端访问历史支持
当你点击后退按钮时，它通过客户端将页面导航到 index 页面; next/link 为你处理了所有的 location.history
您甚至不需要编写哪怕一行的客户端路由代码。
Link的样式
大多数时候,我们可能想要对我们的链接定义样式。这就是我们如何做到的:
<Link href="/about">
<a style={{ fontSize: 20 }}>About Page</a>
</Link>
一旦添加了这个，您就可以看到该样式正确地应用了。
那么这样做会怎么样呢?
<Link href="/about" style={{ fontSize: 20 }}>
<a>About Page</a>
</Link>
上面的代码发生了什么变化?
Link只是一个高阶组件(HOC)
实际上，next/link 的样式属性支持没有效果。那是因为 next/link 仅仅是一个高阶组件，它只接受“href”和一些类似的属性。如果需要对其进行样式化，则需要对其底层组件进行处理。
按钮链接
假设我们需要使用一个“button”而不是一个锚点来连接我们的链接。然后我们需要像这样编辑我们的导航代码:
<Link href="/about">
<button>Go to About Page</button>
</Link>
当你点击index页面上的button时会发生什么?
Link适用于所有东西
就像一个button一样，您可以在一个Link中放置任何定制的响应组件甚至是div。
在一个Link中放置组件的唯一要求是，它们应该接受一个onClick的属性。
链接很简单，但功能强大
这里我们只讨论了 next/link 最基本的用法. 有一些有趣的方法来使用它，我们将在接下来的课程中学习它们。
与此同时，我们来看看 Next.js 的路由文档。你会发现它很有用。
