我对JS非常陌生，并试图了解如何将json文件的内容Map到html元素。
当我在dev服务器上运行时，我得到以下错误：”props.books.map不是函数”。
我的直觉猜测是，我的json文件的格式与.map需要的格式不一致。（我不完全确定静态JSON文件应该是什么样子的。我一直在网上看到不同的例子，所以如果有人有资源，什么行业标准的json文件应该是什么样子的，那就太好了！）
这是我的json文件的一个片段。
./static/bookReviews.json
下面是试图Mapjson文件的文件代码。

• ./pages/content/books.tsx*

import NavBar from "@/components/NavBar";
import { NextPage, GetStaticProps } from "next";

const Books: NextPage<{
  books: {
    author: string;
    dateFinish: string;
    dateStart: string;
    rating: string;
    review: string;
    title: string;
  }[];
}> = (props) => {
  return (
    <div className="justify-between items-center bg-gradient-to-b from-slate-600 to-slate-900 p-10 w-screen h-screen">
      <NavBar />
      <h1>Books</h1>
      

      {props.books.map((x) => {
        return <p>{x.title}</p>;
      })}
    </div>
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const books = (await import("../../static/bookReviews.json")).default;

  return {
    props: { books },
  };
};

export default Books;

请让我知道，如果任何进一步的信息是需要了解这个问题。
任何帮助都非常感谢：）