【Next.js】JSONから読み込むと『TypeError: Cannot read properties of undefined』が出る

Question

実現したいこと

• JSONからTypeScriptにデータを読み込んで表示させたい

前提

Next.js/React TypeScript JSONを使ってWebサイトを作っています。
JSONからデータを読み込もうとした際に以下のエラーメッセージが発生しました。

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

TypeError: Cannot read properties of undefined (reading 'h1')

該当のソースコード

import styles from 'styles/keyword.module.css';

export function Keyword(props) {

    const keyword = props.keyword;

    return (
        <div className={styles.sideBySide}>
            <h1>{keyword.h1}</h1>
            {keyword.p.map((p, index) => (
                <p key={index} className={`${styles.icon} ${styles.iconText}`}>
                    {p}
                </p>
            ))}
        </div>
    );
}

// Fetching data from the JSON file
// import path from 'path'

export async function getStaticProps() {
    const filePath = path.join(process.cwd(), 'data.json');
    const res = await fetch(filePath);
    const objectData = await res.json();

    return {
        props: objectData.data
    };

}

{
    "data": {
		"keyword": {
			"h1": "be used to",
			"p": [
				"助動詞",
				"熟語"
			]
		},
		"tips": [
			"発音に注意",
			"be used to / get used to の違いに注意",
			"used to 原形 / be used to -ing / be used to 原形 の違いに注意"
		],
		"japanese": {
			"be used to 名詞で「名詞に慣れている」"
		},
		"english": {
			"quote": "to have experienced something so that it no longer seems surprising, difficult, strange etc",
			"source": "ロングマン現代英英辞典"
		}
	}
}

試したこと

いろいろと調べたところ、JSONからデータをfetchするときに遅延が起きていてkeywordコンポーネントにデータが渡せていないんじゃないかというところまで現在仮説を立てました。

そして、遅延を回避するため、次のようなコードに修正しました。

import { useEffect, useState } from 'react';
import styles from 'styles/keyword.module.css';

export function Keyword(props) {
  const [keyword, setKeyword] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch('/data.json');
      const data = await response.json();
      setKeyword(data.data.keyword);
    }
    fetchData();
  }, []);

  if (!keyword) {
    return <div>Loading...</div>;
  }

  return (
    <div className={styles.sideBySide}>
      <h1>{keyword.h1}</h1>
      {keyword.p.map((p, index) => (
        <p key={index} className={`${styles.icon} ${styles.iconText}`}>
          {p}
        </p>
      ))}
    </div>
  );
}

しかし、結果としては

  if (!keyword) {
    return <div>Loading...</div>;
  }

の部分の「Loading...」が表示されるだけで、本来表示したい

    <div className={styles.sideBySide}>
      <h1>{keyword.h1}</h1>
      {keyword.p.map((p, index) => (
        <p key={index} className={`${styles.icon} ${styles.iconText}`}>
          {p}
        </p>
      ))}
    </div>

は表示されない状況です。

補足情報（FW/ツールのバージョンなど）

{
	"name": "nextdictionary",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"dev": "next dev",
		"build": "next build",
		"start": "next start",
		"lint": "next lint"
	},
	"dependencies": {
		"@emotion/react": "^11.10.5",
		"@emotion/styled": "^11.10.5",
		"@mui/icons-material": "^5.11.0",
		"@mui/material": "^5.11.8",
		"@next/font": "13.1.6",
		"@types/node": "18.11.18",
		"@types/react": "18.0.27",
		"@types/react-dom": "18.0.10",
		"eslint": "8.33.0",
		"eslint-config-next": "13.1.6",
		"next": "^13.1.7-canary.26",
		"react": "18.2.0",
		"react-dom": "18.2.0",
		"react-icons": "^4.7.1",
		"typescript": "4.9.5"
	}
}

プログラミング初心者・はじめてのteratail利用ということで
至らない点があるかと思いますが
どうぞよろしくお願いいたします。

Answer 1

import data from '../data.json';

を使ってJSONを読み込むことで解決しました！

解決後の全体のコードは以下のようになっています。

import styles from 'styles/keyword.module.css';
import data from '../data.json';

export function Keyword() {
  const keyword = data.data.keyword;
  return (
    <div className={styles.sideBySide}>
      <h1>{keyword.h1}</h1>
      {keyword.p.map((p, index) => (
        <p key={index} className={`${styles.icon} ${styles.iconText}`}>
          {p}
        </p>
      ))}
    </div>
  );
}

今回の学びは次の２点でした。

• pagesの中にあるファイル以外ではgetStaticPropsは使えない。
• fetchは外部のjsonなどを読み込むときに使うものなので、今回は使う必要はない。JSONファイルが同じリポジトリの中に入ってるので、importすればOK。

Answer 2

fetch then の中で set でしょうか

import React, { useState, useEffect } from 'react'

const Fetch = () => {

  const [posts, setPosts] = useState([])

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts', { method: 'GET' })
      .then(res => res.json())
      .then(data => {
        setPosts(data)
      })
  }, [])

  return (
    <div>
    <ul>
    {
      posts.map(post =>
        <li key={ post.id } > { post.title } </li>
      )
    }
    </ul>

    </div>
  )
}

export default Fetch;