学习 Next.js: 建立动态内容

原始文档在 https://github.com/developerw... 如今搬过来.

学习 Next.js: 入门
学习 Next.js: 页面之间的导航
学习 Next.js: 使用共享组件
学习 Next.js: 建立动态内容
学习 Next.js: 使用路由掩码建立干净的URL
学习 Next.js: 干净URL的服务器支持
学习 Next.js: 获取数据
学习 Next.js: 部署

建立动态页面

如今,咱们知道了如何使用多个页面建立一个基本的Next.js应用程序. 为了建立页面, 咱们须要在磁盘上建立实际的文件.

可是, 在真实的应用场景下,咱们一般须要经过数据建立动态的页面, 用动态的方式显示页面内容. 在Next.js中有多种方式来实现这个目的.

首先, 咱们使用查询串来建立一个动态的页面. 咱们建立一个简单的博客应用程序. 在Index页面显示一个博客列表.

当你点击博客标题时, 能够看到博客的具体内容.

如今, 让咱们开始建立这个博客程序.

设置

为了按照本课程学习, 须要有一个示例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/.

添加博客列表

首先, 让咱们在首页添加博客标题列表, 添加下面的代码到 pages/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>
)

而后, 方位 http://localhost:3000, 你会看到下面的内容:

经过查询串传递数据

咱们经过查询串参数传递数据, 在这个例子中为"title"查询串阐述, 表示博客的标题, 咱们下面为博客的标题实现一个自定义的PostLink组件.

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

建立博客页面

建立博客页面, 显示博客内容, 为此咱们须要从查询串中获取标题. 下面建立一个 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>
)

如今, 页面看起来像这样:

• 每一个页面得到一个"URL"属性, 其中包含当前URL相关的详细信息

• 这里咱们使用"query"对象, 它包含查询串参数

• 而后, 咱们从 props.url.query.title 获取博客的标题

如今, 咱们作一点细微的修改, 替换 pages/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"

你看到了, 代码会抛出一个以下所示的错误页面:

这是由于, url 属性仅暴露给了页面的根主键. 并未暴露给页面中的其余组件. 但若是须要, 能够像下面这样把url属性传递给其余组件.

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

最后

如今咱们已经学习到了如何使用查询串建立动态页面. 但这仅仅只是开始. 一个动态页面须要更多的信息来渲染, 咱们不太可能经过查询串传递全部的信息. 咱们想要有一个干净的像这样的URL: http://localhost:3000/blog/hello-nextjs.

接下来, 咱们将会学到关于这方面的全部信息. 这是全部其余事情的基础.