Javascript 全局布局组件中的next.js getInitialProps

我正在用next.js建立一个网站，我正试图解决以下“问题”。我有一些静态数据（网站文本），需要从API端点（无头CMS）获取

对于单个页面，我使用

getInitialProps

获取所需数据。但是，我的主布局中也有一个页脚组件。layout和Footer组件都没有getInitialProps解决方案，那么如何以“好”的方式处理这个问题呢

我想到了一些解决方案：

我可以使用componentDidMount为footer组件中的数据执行客户端获取（但我确实希望服务器获取/使其成为静态）

将页脚移动到每个页面，并提供

getInitialProps

，添加一些HOC以防止重写所有代码

正如我所说的，数据是静态的，所以可以通过server.js或_document.js在全球范围内使用（但我不知道如何实现这一点）

---

有人能给我指出正确的方向吗

您可以将页眉和页脚组件放入

\u app.js

中

首先，在

App.getInitialProps

中，获取服务器端所需的任何数据或执行任何操作。然后，您返回的数据可以作为道具返回，并与

组件.getInitialProps

（页面组件的getInitialProps）的结果相结合

在渲染函数中，您可以访问

this.props.pageProps

（或者

this.props.data

，如果将其分隔开）。然后，您可以将其传递给页眉和页脚

<Header {...pageProps} />
  <main>
    <Component {...pageProps} />
  </main>
<Footer {...pageProps} />

---

您可以将页眉和页脚组件放入

\u app.js

中

首先，在

App.getInitialProps

中，获取服务器端所需的任何数据或执行任何操作。然后，您返回的数据可以作为道具返回，并与

组件.getInitialProps

（页面组件的getInitialProps）的结果相结合

在渲染函数中，您可以访问

this.props.pageProps

（或者

this.props.data

，如果将其分隔开）。然后，您可以将其传递给页眉和页脚

<Header {...pageProps} />
  <main>
    <Component {...pageProps} />
  </main>
<Footer {...pageProps} />