Next.jsでAxiosでgetStaticProps(feat.typeScirrpt)を使用する

どうしたんですか。

ふだんjsでもaxiosを使うのが好きな私は、getStaticPropsを使うときもfetchではなくaxiosを使ってデータを受信したいと思っています.SSR方式でメニューを導入したいので、応用してみます.スクリーンショットのように追加されたデータを受信する形式なのでCSRは適切なはずですが、適用してみたいので試してみました.

APIはまだ設計されていません

ああ….まず、サーバなしでAPIを作成しました.画像がどのようにJSONに入るかはバックエンドで異なる可能性があるため,簡単なプロトタイプコードを作成し,一時的に画像を削除すると考えられる.

Next.js apiの作成

next.jsはapiルーティングをサポートするため、サーバなしでWebを作成できるという利点があります.
https://nextjs.org/docs/api-routes/introduction
pages/api/getFoodです.tsというファイルを作成し、以下に示すようにjsonを返すコードを生成します.

import type { NextApiRequest, NextApiResponse } from "next";

type Data = {
  name: string;
  price: number;
  content: string;
};

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data[]>
) {
  res.status(200).json([
    {
      name: "토마토 연어 구이",
      price: 9000,
      content:
        "생토마토로 후레쉬한 소스를 만들어 연어스테이크와 곁들인 슈퍼푸드로 만든 건강한 요리!",
    },
    {
      name: "계란 오이 정식",
      price: 7000,
      content:
        "싱싱한 슬라이스 오이에 부드럽게 익은 달걀을 고소한 견과류와 곁들인 비건 정식!",
    },
    {
      name: "토마토 연어 구이",
      price: 9000,
      content:
        "생토마토로 후레쉬한 소스를 만들어 연어스테이크와 곁들인 슈퍼푸드로 만든 건강한 요리!",
    },
    {
      name: "계란 오이 정식",
      price: 7000,
      content:
        "싱싱한 슬라이스 오이에 부드럽게 익은 달걀을 고소한 견과류와 곁들인 비건 정식!",
    },
  ]);
}

GetStaticProps

では、必要なページやコンポーネントでどのように使用しますか?ページの下部には、通常、次の論理が記述されます.

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
  }
}

https://nextjs.org/docs/basic-features/data-fetching/get-static-props
私はAxiosを用いてtry-catchで論理分岐を行ったので以下のように書きました.

interface IFoodData {
  name: string;
  price: number;
  content: string;
}

export async function getStaticProps() {
  try {
    const response = await axios.get<IFoodData>(
      "http://localhost:3000/api/getFood"
    );
    const data = response.data;
    return {
      props: {
        foodGetData: data,
      },
    };
  } catch (err) {
    console.log(err);
  }
}

そしてPageで車に戻る道具の使用を受ければいいです

interface Props {
  foodGetData: IFoodData[];
}

const MenuPage: NextPage<Props> = ({ foodGetData }) => {...