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,
},
};
};
Header.jsxで出ているエラーの内容
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}