學(xué)習(xí) Next.js: 創(chuàng)建動(dòng)態(tài)內(nèi)容

caohaoyu 發(fā)布于2019-08-20 16:56 / 2314人閱讀

摘要：原始文檔在現(xiàn)在搬過(guò)來(lái)學(xué)習(xí)入門學(xué)習(xí)頁(yè)面之間的導(dǎo)航學(xué)習(xí)使用共享組件學(xué)習(xí)創(chuàng)建動(dòng)態(tài)內(nèi)容學(xué)習(xí)使用路由掩碼創(chuàng)建干凈的學(xué)習(xí)干凈的服務(wù)器支持學(xué)習(xí)獲取數(shù)據(jù)學(xué)習(xí)部署創(chuàng)建動(dòng)態(tài)頁(yè)面現(xiàn)在我們知道了如何使用多個(gè)頁(yè)面創(chuàng)建一個(gè)基本的應(yīng)用程序?yàn)榱藙?chuàng)建頁(yè)面我們需要在磁盤上創(chuàng)建

原始文檔在 https://github.com/developerw... 現(xiàn)在搬過(guò)來(lái).
學(xué)習(xí) Next.js: 入門
學(xué)習(xí) Next.js: 頁(yè)面之間的導(dǎo)航
學(xué)習(xí) Next.js: 使用共享組件
學(xué)習(xí) Next.js: 創(chuàng)建動(dòng)態(tài)內(nèi)容
學(xué)習(xí) Next.js: 使用路由掩碼創(chuàng)建干凈的URL
學(xué)習(xí) Next.js: 干凈URL的服務(wù)器支持
學(xué)習(xí) Next.js: 獲取數(shù)據(jù)
學(xué)習(xí) Next.js: 部署

創(chuàng)建動(dòng)態(tài)頁(yè)面

現(xiàn)在,我們知道了如何使用多個(gè)頁(yè)面創(chuàng)建一個(gè)基本的Next.js應(yīng)用程序. 為了創(chuàng)建頁(yè)面, 我們需要在磁盤上創(chuàng)建實(shí)際的文件.

但是, 在真實(shí)的應(yīng)用場(chǎng)景下,我們通常需要通過(guò)數(shù)據(jù)創(chuàng)建動(dòng)態(tài)的頁(yè)面, 用動(dòng)態(tài)的方式顯示頁(yè)面內(nèi)容. 在Next.js中有多種方式來(lái)實(shí)現(xiàn)這個(gè)目的.

首先, 我們使用查詢串來(lái)創(chuàng)建一個(gè)動(dòng)態(tài)的頁(yè)面. 我們創(chuàng)建一個(gè)簡(jiǎn)單的博客應(yīng)用程序. 在Index頁(yè)面顯示一個(gè)博客列表.

當(dāng)你點(diǎn)擊博客標(biāo)題時(shí), 可以看到博客的具體內(nèi)容.

現(xiàn)在, 讓我們開始創(chuàng)建這個(gè)博客程序.

設(shè)置

為了按照本課程學(xué)習(xí), 需要有一個(gè)示例Next.js應(yīng)用程序, 為此, 你可以下載下面的這個(gè)應(yīng)用程序作為學(xué)習(xí)案例:

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

可以用下面的命令來(lái)運(yùn)行:

npm install
npm run dev

現(xiàn)在, 訪問(wèn) http://localhost:3000/.

添加博客列表

首先, 讓我們?cè)谑醉?yè)添加博客標(biāo)題列表, 添加下面的代碼到 pages/index.js 模塊文件中.

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

const PostLink = (props) => (
  
    
      {props.title}
    
  
)

export default () => (
  
    My Blog
    
      
      
      
    
  
)

然后, 方位 http://localhost:3000, 你會(huì)看到下面的內(nèi)容:

通過(guò)查詢串傳遞數(shù)據(jù)

我們通過(guò)查詢串參數(shù)傳遞數(shù)據(jù), 在這個(gè)例子中為"title"查詢串闡述, 表示博客的標(biāo)題, 我們下面為博客的標(biāo)題實(shí)現(xiàn)一個(gè)自定義的PostLink組件.

const PostLink = (props) => (
  
    
      {props.title}
    
  
)

創(chuàng)建博客頁(yè)面

創(chuàng)建博客頁(yè)面, 顯示博客內(nèi)容, 為此我們需要從查詢串中獲取標(biāo)題. 下面創(chuàng)建一個(gè) pages/post.js 文件, 并添加如下內(nèi)容:

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

export default (props) => (
    
       {props.url.query.title}
       This is the blog post content.
    
)

現(xiàn)在, 頁(yè)面看起來(lái)像這樣:

每個(gè)頁(yè)面獲得一個(gè)"URL"屬性, 其中包含當(dāng)前URL相關(guān)的詳細(xì)信息

這里我們使用"query"對(duì)象, 它包含查詢串參數(shù)

然后, 我們從 props.url.query.title 獲取博客的標(biāo)題

現(xiàn)在, 我們做一點(diǎn)細(xì)微的修改, 替換 pages/post.js的內(nèi)容為如下:

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

const Content = (props) => (
  
    {props.url.query.title}
    This is the blog post content.
  
)

export default () => (
    
       
    
)

然后訪問(wèn) http://localhost:3000/post?title=Hello%20Next.js 看是什么效果?

特殊屬性"url"

你看到了, 代碼會(huì)拋出一個(gè)如下所示的錯(cuò)誤頁(yè)面:

這是因?yàn)? url 屬性僅暴露給了頁(yè)面的根主鍵. 并未暴露給頁(yè)面中的其他組件. 但如果需要, 可以像下面這樣把url屬性傳遞給其他組件.

export default (props) => (
    
       
    
)

最后

現(xiàn)在我們已經(jīng)學(xué)習(xí)到了如何使用查詢串創(chuàng)建動(dòng)態(tài)頁(yè)面. 但這僅僅只是開始. 一個(gè)動(dòng)態(tài)頁(yè)面需要更多的信息來(lái)渲染, 我們不太可能通過(guò)查詢串傳遞所有的信息. 我們想要有一個(gè)干凈的像這樣的URL: http://localhost:3000/blog/hello-nextjs.

接下來(lái), 我們將會(huì)學(xué)到關(guān)于這方面的所有信息. 這是所有其他事情的基礎(chǔ).