add comment

lib/strapi.ts

-import {Guitar} from "../type/guitars";
+import { Guitar } from "../type/guitars";
 
+/**
+ * Guitar情報取得処理
+ */
 export const fetchGuitars = async (): Promise<Guitar[]> => {
-    const response = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_URL}/api/guitars?populate=*`)
-    const guitars:Guitar[] =await response.json().then((json) => json.data)
-    return guitars
-}
+  // StrapiのAPIを呼び出し
+  const response = await fetch(
+    `${process.env.NEXT_PUBLIC_STRAPI_URL}/api/guitars?populate=*`
+  );
+  // apiのresponseからdata部のみ取り出し
+  const guitars: Guitar[] = await response.json().then((json) => json.data);
+  return guitars;
+};

pages/ssg.tsx

 import { GetStaticProps } from "next";
 import { Guitar, GuitarResponse } from "../type/guitars";
 
+// ===========================
+// getStaticPropsのpropsに設定したデータを引数で受け取れる
+// ==========================
 const Ssg: FC<GuitarResponse> = ({ guitars }) => {
   return (
     <div>
   );
 };
 
+// ===============================
+// 静的サイト作成時にはgetStaticPropsの中で
+// 表示データを作成する
+// ===============================
 export const getStaticProps: GetStaticProps = async () => {
   const guitars = await fetchGuitars();
   return {

pages/ssr.tsx

 import { GetServerSideProps } from "next";
 import { Guitar, GuitarResponse } from "../type/guitars";
 
+// ===========================
+// getServerSidePropsのpropsに設定したデータを引数で受け取れる
+// ==========================
 const Ssr: FC<GuitarResponse> = ({ guitars }) => {
   return (
     <div>
   );
 };
 
+// ===============================
+// サーバサイドレンダリング時にはgetServerSidePropsの中で
+// 表示データを作成する
+// ===============================
 export const getServerSideProps: GetServerSideProps = async () => {
   const guitars = await fetchGuitars();
   return {