なぜheaderコンポーネントでデータを取得できないのか

Question

###getStaticPropsを使ってデータを受け取りたい

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

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

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

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

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

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;
};

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

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,
  
      },
    };
  };

ここに実現したいことを箇条書き

発生している問題・エラーメッセージ

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}

Answer 1

Header.jsxは「pages」ディレクトリ内にありますでしょうか？？
getStaticPropsは「pages」ディレクトリ以外では使用できないためだと思われます！

Comments

[Gheoxj]

そうだったんですね。。
数日悩んでいたので助かりました！
Next.jsを学習し直してみます、ご回答ありがとうございました！

Answer 2

<Header category={blog.category && `${blog.category.name}`} title={blog.title}/>

これだとcategory属性に必須の「配列」が渡ることはない
&&演算子の振る舞いを調べてみるとよいです

文脈から、渡したいのはHome関数（コンポーネント）の引数にあるcategoryじゃないのかな？
console.log(category) //カテゴリのデータを取得できるなのにcategory={category}ではないのが謎に見える
とりあえず渡したい値（配列）を確認、それを素直にcategory属性に渡してみて

Comments

[Gheoxj]

ご回答ありがとうございます！
確認してみます！