Next.jsでAxiosでgetStaticProps(feat.typeScirrpt)を使用する
10646 ワード
どうしたんですか。
ふだん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 }) => {...
Reference
この問題について(Next.jsでAxiosでgetStaticProps(feat.typeScirrpt)を使用する), 我々は、より多くの情報をここで見つけました https://velog.io/@hhhminme/Next.js에서-Axios를-통해-getStaticProps를-사용해보자feat.-typescirptテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol