new-hp/pages/ssg.tsx

import React, { FC } from "react";
import { fetchGuitars } from "../lib/strapi";
import { GetStaticProps } from "next";
import { Guitar, GuitarResponse } from "../type/guitars";

// ===========================
// getStaticPropsのpropsに設定したデータを引数で受け取れる
// ==========================
const Ssg: FC<GuitarResponse> = ({ guitars }) => {
  return (
    <div>
      {guitars.map((guitar: Guitar) => {
        return <div key={guitar.id}>{guitar.attributes.name}</div>;
      })}
    </div>
  );
};

// ===============================
// 静的サイト作成時にはgetStaticPropsの中で
// 表示データを作成する
// ===============================
export const getStaticProps: GetStaticProps = async () => {
  const guitars = await fetchGuitars();
  return {
    props: {
      guitars,
    },
  };
};

export default Ssg;