使用getInitialProps將數據饋送到Next.js組件

如何使用getInitialProps將數據饋送到Next.js組件

當我談論向Next.js添加動態內容我們動態生成帖子頁面時遇到問題,因為該組件需要預先提供一些數據,並且當我們嘗試從JSON文件中獲取數據時:

import { useRouter } from 'next/router'
import posts from '../../posts.json'

export default () => { const router = useRouter()

const post = posts[router.query.id]

return ( <> <h1>{post.title}</h1> <p>{post.content}</p> </> ) }

我們得到了這個錯誤:

我們該如何解決呢?以及如何使SSR適用於動態路線?

我們必須使用稱為的特殊功能為組件提供道具getInitialProps()附加到組件上。

為此,首先我們將組件命名為:

const Post = () => {
  //...
}

export default Post

然後我們將功能添加到它:

const Post = () => {
  //...
}

Post.getInitialProps = () => { //… }

export default Post

該函數將一個對像作為其參數,其中包含多個屬性。特別是,我們現在感興趣的是,我們得到了query對象,我們之前用來獲取帖子ID的對象。

因此,我們可以使用對象解構句法:

Post.getInitialProps = ({ query }) => {
  //...
}

現在我們可以從該函數返回帖子:

Post.getInitialProps = ({ query }) => {
  return {
    post: posts[query.id]
  }
}

我們也可以刪除導入useRouter,我們從props財產傳遞給Post成分:

import posts from '../../posts.json'

const Post = props => { return ( <div> <h1>{props.post.title}</h1> <p>{props.post.content}</p> </div> ) }

Post.getInitialProps = ({ query }) => { return { post: posts[query.id] } }

export default Post

現在將沒有錯誤,並且SSR將按預期運行,如您所見,查看視圖源:

getInitialProps當我們使用Link組件,就像我們所做的那樣。

重要的是要注意getInitialProps在接收到的上下文對像中,除了query反對這些其他屬性:

  • pathname: 這pathURL部分
  • asPath-實際路徑(包括查詢)的字符串顯示在瀏覽器中

在打電話的情況下http://localhost:3000/blog/test將分別導致:

  • /blog/[id]
  • /blog/test

對於服務器端渲染,它還將收到:

  • req:HTTP請求對象
  • res:HTTP響應對象
  • err:錯誤對象

reqres如果您已完成任何Node.js編碼,您將很熟悉。

免費下載我的Next.js手冊


接下來的更多教程: