四、Next.js，动态页面

Next.js是一个新的通用JavaScript框架，它为基于React和服务器的Web应用提供了一个新的可选方案。

Next.js目前已经开源，https://zeit.co/blog/next

现在我们知道如何创建一个基本的多页面Next.js应用。为了创建一个页面，我们必须在磁盘上创建一个实际的文件。

然而，在一个真正的应用中，我们需要动态创建页面来显示动态内容。Next.js有很多方法可以使用。

我们开始使用查询字符串创建动态页面。

我们将创建一个简单的博客应用程序，它有一个关于home(index)页面的所有帖子的列表。

Paste_Image.png

当你点击一个帖子标题，你就能看到它自己的内容。

Paste_Image.png

让我们构建应用程序。

安装

首先，我们需要一个简单的Next.js应用程序。试着下载下面的示例应用程序:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout using-shared-components

你可以执行下面的命令

npm install
npm run dev

现在，您可以通过导航到 http://localhost:3000 来访问该应用程序。

添加一个贴子列表

首先，让我们在主页中添加帖子标题。将以下内容添加到 page/index.js 中。

import Layout from '../components/MyLayout.js'
import Link from 'next/link'

const PostLink = (props) => (
  <li>
    <Link href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)

export default () => (
  <Layout>
    <h1>My Blog</h1>
    <ul>
      <PostLink title="Hello Next.js"/>
      <PostLink title="Learn Next.js is awesome"/>
      <PostLink title="Deploy apps with Zeit"/>
    </ul>
  </Layout>
)

一旦添加了这些内容，就会看到这样的页面:

Paste_Image.png

接下来，单击第一个链接。你会得到一个404页面。这很好。那个页面的URL是什么?

通过查询字符串传递数据

我们正在通过一个查询字符串参数(a query param)传递数据。在我们的例子中,"title"是我们的查询参数。下面是我们的 PostLink 组件，如下所示:

const PostLink = (props) => (
  <li>
    <Link href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)

(留意 Link 组件的 href 属性)。

就像这样，您可以通过查询字符串传递任何类型的数据。

创建“帖子”页面

现在我们需要创建一个帖子页面来显示博客文章。为了做到这一点，我们需要从查询字符串获取标题。让我们看看如何做到这一点:

创建一个名为 pages/post.js 的文件，并添加以下内容:

import Layout from '../components/MyLayout.js'

export default (props) => (
    <Layout>
       <h1>{props.url.query.title}</h1>
       <p>This is the blog post content.</p>
    </Layout>
)

现在我们的页面看起来是这样子的：

Paste_Image.png

这是上面代码中所发生的事情。

每个页面都将得到一个“URL”的属性回调，它有一些与当前URL相关的详情。
在本例中，我们使用了“query”对象，该对象具有查询字符串params。
因此，我们通过props.url.query.title 获得了 title。

让我们对我们的应用做一个简单的修改，替换“pag/post”的内容。js”如下:

import Layout from '../components/MyLayout.js'

const Content = (props) => (
  <div>
    <h1>{props.url.query.title}</h1>
    <p>This is the blog post content.</p>
  </div>
)

export default () => (
    <Layout>
       <Content />
    </Layout>
)

当你导航到这个页面时会发生什么? http://localhost:3000/post?title=Hello%20Next.js

特殊属性“url”

正如您所看到的，代码将抛出这样的错误:

Paste_Image.png

这是因为，url 属性只会暴露在页面的主要组件中。这不会暴露在页面中使用的其他组件中。但是，如果你需要，你可以这样传递:

export default (props) => (
    <Layout>
       <Content url={props.url} />
    </Layout>
)

最后

现在，我们学习了如何使用查询字符串创建动态页面。这仅仅是开始。

动态页面可能需要更多的信息来呈现，而我们可能无法通过查询字符串传递所有信息。或者我们可能想要有这样干净的url:
http://localhost:3000/blog/hello-nextjs

在即将到来的课程中，我们可以学到这些知识。这是所有这些的基础。

本文翻译自：https://learnnextjs.com/basics/create-dynamic-pages

四、Next.js，动态页面