getInitialProps 永远不会执行

Question

我正在尝试制作一个 Twitter 组件，该组件从 twitter API 加载推文并显示其 HTML，这将是一个 <blockquote> 和一个 <script> 标记。

这样做的好处是，如果在服务器端渲染，即使用户有阻止调用 twitter 脚本的隐私设置，它也可以工作：用户仍然会得到 blockquote，这比当前的行为 (什么都不显示）。

所以，我的想法是做这样的事情：

import fetch from 'node-fetch'

function Tweet(props) {
  return <>
    <div dangerouslySetInnerHTML={{
      __html: props.__html
    }} />
    <p>here I am</p>
  </>
}

Tweet.getInitialProps = async ctx => {
  console.log("here I am on the road again")
  const res = await fetch(`https://api.twitter.com/1/statuses/oembed.json?id=${ctx.tweetId}`)
  const json = await res.json()
  return { __html: json.html }
}

export default Tweet

然后在页面上像<Tweet tweetId="blah" />一样使用它。

我发现我的想法有两个问题：

1. 根据文档，我无法访问 getInitialProps 上的 tweetId 属性
2. getInitialProps 永远不会被调用。 <p>here I am</p> 出现在 HTML 中，并且日志永远不会打印在任何地方。

所以，我的问题是：我做错了什么？这甚至可以做到吗？

谢谢！

Answer 1

根据 Next.js documentation，getInitialProps 只能用于页面，不能用于组件：

getInitialProps只能添加到页面导出的默认组件中，添加到其他任何组件都不起作用。