nextjs with typescript:07 getStaticProps
【1】getStaticPropsをつかう
アプリのビルド時にデータフェッチしてHTMLを生成する「Static Generation」を行うために使うのが「getStaticProps」。
■typescriptを使った使い方
import { GetStaticProps } from 'next';
//propsのやり取りで使う型の定義
export interface Person{
id:number;
name:string;
details:string;
}
//関数コンポーネントが受けるデータ構造
interface StaticIndexProps{
persons:Person[]; //Person型は上記のとおり
}
//StaticIndexProps型のpropsをうけとる
const StaticIndex = ({persons}:StaticIndexProps) =>{
return (
<div>
<h3>this is test for GetStaticProps</h3>
<pre>
{JSON.stringify(persons,null,4)}
</pre>
</div>
);
}
export default StaticIndex
//GetStaticPropsでデータフェッチ
export const getStaticProps:GetStaticProps = async (ctx) =>{
const response = await fetch('http://localhost:4001/persons');
const persons = await response.json();
return {props:{persons}};
}
まず最初に「getStaticProps」が動作してデータフェッチする。次にフェッチしたデータをpropsとして関数コンポーネントに渡す。こうして受け取ったデータを関数コンポーネント側で描画に使う、という流れ。
注意点はデータフェッチの際はasync/awaitで非同期処理を適切に行わないと適切な結果を得られなくなる点。
【2】getStaticPropsの使いどころ
以下のようなことが想定できるならば、StaticGenerationを検討してみるとよい。
・リアルタイム性を要求されない
・頻繁に内容が変わらない
・リロードするたびに表示データはかわらない
など
具体的な想定例としてNext.js公式のページにもあるが、
・マーケティングページ
・ブログ記事
・Eコマースの製品リスト
・ヘルプページ(FAQページなど)
などなど。
もっと応援したいなと思っていただけた場合、よろしければサポートをおねがいします。いただいたサポートは活動費に使わせていただきます。