【next.js】APIから取得したデータを全ページ（ヘッダー）で使いたい

Question

実現したいこと

APIから取得した情報（カテゴリー一覧など）を、全ページ共通のヘッダーのメニューで使いたいです。

今の私の知識だと、APIから取得するデータはpages/の中のgetStaticPropsでAPIから情報を取得すると学習しています。

しかし、全ページ共通のヘッダーは、以下のように_app.jsxとLayout.jsxで全ページに読み込ませています。

      <Layout>
        <Component {...pageProps} />
      </Layout>

import Header from '@/components/base/Header/Header';
export default function Layout({ children }) {
  return (
    <>
      <Header />
      <main>{children}</main>
      <Footer />
    </>
  );
}

このような場合、どのコンポーネントでAPIを実行して、最終的に<Header />に情報を渡せばいいのでしょうか？

いくつか記事を読んだのですが、_appや_documentでもできそうで、最適な答えが分からなかったので質問させて頂きました。
https://qiita.com/tetsurotayama/items/2101938ba8f224b61200

Answer 1

layoutComponentのchildrenにpagesのpropsが入っているので、それでheaderComponentに情報を渡せました