为什么数据未显示在nextjs中？

我正在制作一个非常非常简单的nextjs应用程序，试图从api中获取数据。

我的要求是我应该在layout.js文件中显示数据，并且该layout.js文件是文件中的子项index.js。

index.js：

import Layout from "./layout";
import React from "react";

class Home extends React.Component {
  render() {
    return (
      <div>
        <Layout />
        <h4> Main content will be displayed here !! </h4>
      </div>
    );
  }
}

export default Home;

layout.js：

import React from "react";
import fetch from "isomorphic-unfetch";

function Layout(props) {
  return (
    <div>
      <p>Preact has {props.stars} ⭐</p>
      <p> Why I couldn't get the above "props.star" ? </p>
    </div>
  );
}

Layout.getInitialProps = async () => {
  console.log("comes into layout getinitial props");
  const res = await fetch("https://api.github.com/repos/developit/preact");
  const json = await res.json(); // better use it inside try .. catch
  return { stars: json.stargazers_count };
};

export default Layout;

因此，按照上面给定的代码，我在layout页面内部调用了页面index.js（在我的真实应用程序中，我只需要这样调用，因此在索引内部调用布局时无需更改）。

但是，当我在布局console.log()中的函数Layout.getInitialProps中创建a 时，它不会打印任何内容，因此不会获取api数据。

使用代码在此处完成工作演示

为什么layout.js在作为子代调用时无法获取内部数据index.js？

还要为我提供正确的更新解决方案以实现此目标。.我确实搜索了很多问题，但没有一个解决了我的问题，并且我无法清楚地理解这些解决方案，因此请通过上面给出的示例帮助我。