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

Question

我正在使用 next.js 构建一个网站，并且我正在努力思考以下 "problem"。我有一些静态数据（网站文本）需要从 API 端点（无头 CMS）获取。

对于个别页面，我使用 getInitialProps 来获取所需的数据。但是，我的主布局中也有一个 Footer 组件。 layout 和 Footer 组件都没有 getInitialProps 的解决方案，那么"nice"如何处理呢？

我想到的一些解决方案：

我可以使用 componentDidMount 在客户端获取页脚组件中的数据（但我真的想要服务器获取/使其静态化）。
将页脚移动到每个页面并提供 getInitialProps，添加一些 HOC 以防止重写所有代码。
正如我所说，数据是静态的，因此可以通过 server.js 或 _document.js 使其在全球范围内可用（虽然我不知道如何完成此操作）。

任何人都可以指出我正确的方向吗？

Answer 1

您可以将页眉和页脚组件放在 _app.js 中。

首先，在 App.getInitialProps 中，获取任何数据或执行您需要在服务器端发生的任何操作。然后，您 return 可以 return 将此数据与 Component.getInitialProps 的结果（您的页面组件的 getInitialProps）相结合 return。

static async getInitialProps({ Component, ctx }) {
  let pageProps = {};

  // Make any initial calls we need to fetch data required for SSR
  const isAuthed = await ctx.reduxStore.dispatch(checkAuth());

  // Load the page getInitiaProps
  if (Component.getInitialProps) {
    pageProps = await Component.getInitialProps({ isAuthed, ...ctx });
  }

  return { pageProps: { ...pageProps, isAuthed } };
  // Or, if the async data is separate from your page props:
  // { pageProps, data: { isAuthed } };
}

在您的渲染函数中，您可以访问 this.props.pageProps（或 this.props.data，如果您将其分开）。然后您可以将其传递给页眉和页脚。

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

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

next.js getInitialProps in a global layout component

javascript

next.js