使用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手册


接下来的更多教程: