使用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：错误对象

req和res如果您已完成任何Node.js编码，您将很熟悉。

免费下载我的Next.js手册

使用getInitialProps将数据馈送到Next.js组件

如何使用getInitialProps将数据馈送到Next.js组件

接下来的更多教程：