學習 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.

接下來, 咱們將會學到關於這方面的全部信息. 這是全部其餘事情的基礎.