reactjs - 带有 next.js 的动态标头

Question

我正在尝试创建一个标题组件，该组件使用来自 rest api 的数据来创建导航栏。我遇到的问题是如何获取这些数据 - 理想情况下，我想使用 getStaticProps，因为它没有太大变化，但是我无法在 _app 文件中使用它。

现在我是：

• 使用 getInitialProps 从 _app 文件中获取数据
• 将此数据发送到 MyApp 组件
• 使用检查数据是否已返回的函数检查何时收到数据
• 然后将这些数据通过调度函数（我使用上下文 API）并将数据添加到属性 headerData 下的 globalState 对象
• 然后在需要它们的组件中使用此上下文。

除了 getInitialProps 我在页面内部使用 getStaticProps 之外，每个页面都在进行此过程（因为我不能在 _app 中使用 getStaticProps）

这无疑是一个糟糕的设计，但我不确定如何构建这个项目。数据对网站至关重要，甚至包含应使用的颜色等。我一直在无休止地搜索，无法找到如何构建一个由存储在 rest API 中的数据构建的站点，包括页眉和页脚等常见组件。有任何想法吗？

这是我正在使用的代码 - （虽然我不再将它用于标题）

import fetch from 'node-fetch';
import { GlobalContext } from 'context';
import { useContext, useEffect, useState } from 'react';
import LandingPage from 'components/landing/LandingPage';

export default function Home(props) {
  const { globalState, dispatch } = useContext(GlobalContext);
  const [dataLoaded, setDataLoaded] = useState(false);
  // function that checks if the data has been loaded or not
  useEffect(() => {
    dispatch({ type: 'header', data: props.head });
    dispatch({ type: 'landing', data: props.res });
  }, [dataLoaded]);
  return (
    <div>
      <LandingPage data={props.data} />
    </div>
  );
}

export async function getStaticProps(ctx) {
  const data = await fetch(`${process.env.API_URL}/landing-page`);
  const res = await data.json();

  return {
    props: {
      data: res,
    },
  };
}

export async function getStaticProps(context) {
  const data = await fetch(`${process.env.API_URL}/header`);
  const res = await data.json();
  console.log(context);
  return {
    props: {
      head:res,
    },
  };
}

标签： reactjsnext.jsstrapireact-context