

next.js microcmsでサイトを作成しており、index.jsxでは「getStaticProps」を使ってfiledのjsonのデータを  
取得できますが、Headerコンポーネントでは受け取ることができません。

index.jsxでは受け取れて、なぜHeaderコンポーネントでは受け取ることができないのか理解ができないので  
解決方法がわからず困っております。

どなたかご回答いただけると幸いです。

以下がコードになります。

**jsonのfiledを受け取ることができている 「index.jsx」**

[code]

    import Link from 'next/link'
    import styles from '../../styles/Home.module.scss'
    
    import { Header } from './components/Header'
    import { client } from '../lib/client'
    
    export default function Home({blog,category}) {
    
      console.log(category)　//カテゴリのデータを取得できる
    
      return (
        <div className={styles.container}>
          <Header category={blog.category && `${blog.category.name}`} title={blog.title}/>
    
          <main className={styles.main}>
            <article className={styles.articleList}>
              {blog.map((blog) => (
                <Link href={`/blog/${blog.id}`} className={styles.articleItem} key={blog.id}>
                  <p className={styles.artilceCategory}>{blog.category && `${blog.category.name}`}</p>
                  {/* <Image src={blog.eyecatch.url} width={100} height={100} alt="ブログのアイキャッチ画像です"></Image> */}
                  <div className={styles.imageContent}>
                    <p className={styles.image}></p>
                  </div>
                  <p className={styles.articleTitle}>{blog.title}</p>
                  <p className={styles.desc}>{blog.description}</p>
                </Link>
              ))}
            </article>
          </main>
          <div className={styles.sideContainer}>
            <ul>
              {category.map((category) => (
                <li key={category.id}>
                  <Link href={`/category/${category.id}`}>
                    {category.name}
                  </Link>
                </li>
              ))}
            </ul>
          </div>
    
    
        </div>
        
      )
      
    }
    
    //SSGで取得
    export const getStaticProps = async () => {
      const data = await client.get({ endpoint: "blogs" });
      const category = await client.get({ endpoint: "categories" });
    
      return {
        props: {
          blog: data.contents,
          category:category.contents,
    
        },
      };
    };
    
    //日付のフォーマットを調整
    export const formatDate = (date) => {
      const formattedDate = dayjs.utc(date).tz("Asia/Tokyo").format("YYYY_MM");
      return formattedDate;
    };
    
[/code]

**jsonのfiledが取得できない「Header.jsx」**

[code]

    import { memo } from "react";
    import { client } from '../../lib/client'
    
    import Link from "next/link";
    import styles from '../../../styles/components/Header.module.scss'
    
    
    
    
    export const Header = memo(function headerComponents({category}) {
        console.log(category); //undefinedになってしまう
        return(
            <header className={styles.header}>
             <ul>
                {category.map((category) => (
                  <li key={category.id}>
                    <Link href={`/category/${category.id}`}>
                      {category.name}
                    </Link>
                  </li>
                ))}
              </ul>
            </header>
        )
    });
    
    //SSGで取得
    export const getStaticProps = async () => {
        const data = await client.get({ endpoint: "blogs" });
        const category = await client.get({ endpoint: "categories" });
      
        return {
          props: {
            blog: data.contents,
            category:category.contents,
      
          },
        };
      };
    
    
    
[/code]

**Header.jsxで出ているエラーの内容**

[code]

    Unhandled Runtime Error
    TypeError: Cannot read properties of undefined (reading 'map')
    
    Source
    src/pages/components/Header.jsx (15:22) @ headerComponents
    
      13 | <header className={styles.header}>
      14 |  <ul>
    > 15 |     {category.map((category) => (
         |              ^
      16 |       <li key={category.id}>
      17 |         <Link href={`/category/${category.id}`}>
      18 |           {category.name}
    
[/code]


CC BY-SA 4.0
2022-12-11T14:31:07.477
92705
2022-12-11T14:31:07.477
55914
question
reactjs next.js
Headerコンポーネントでmicrocmsから記事データを取得をしたい