nextjs with typescript:07 getStaticProps

【１】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で非同期処理を適切に行わないと適切な結果を得られなくなる点。

【２】getStaticPropsの使いどころ

以下のようなことが想定できるならば、StaticGenerationを検討してみるとよい。
・リアルタイム性を要求されない
・頻繁に内容が変わらない
・リロードするたびに表示データはかわらない
など

具体的な想定例としてNext.js公式のページにもあるが、
　　・マーケティングページ
　　・ブログ記事
　　・Eコマースの製品リスト
　　・ヘルプページ（FAQページなど）
などなど。