getStaticPropsの使い方：ビルド時のデータをpropsへ渡す
getStaticPropsを単独の関数として学び、ビルド時のデータ取得、propsの型、公開される情報と秘密値の境界を確認します。
getStaticPropsを単独の関数として学び、ビルド時のデータ取得、propsの型、公開される情報と秘密値の境界を確認します。
対象環境と役割
Pages Routerで使う機能
Pages Routerでは pages ディレクトリを使います。App Routerの app へ同じファイルを移しても、データ取得やルーティングの規約は引き継がれません。この記事では役割を絞ったサンプルで、実行タイミングと受け渡す値を確認します。
引数・戻り値・受け渡すデータ
引数のcontextには動的ルートの params などが入ります。成功時は { props: ... } を返し、propsはJSONとしてシリアライズできる値にします。DateはISO文字列へ変換するなど、ブラウザーへ渡す形を明確にします。
コード例を動かす
pages/catalog.tsx を作成する
以下はこのファイルとして配置する例です。既存ファイルへ追記する場合は、同じ名前のexportやURLが重複しないように統合してください。
import type { GetStaticProps, InferGetStaticPropsType } from 'next';
type Props = { books: { id: string; title: string }[]; builtAt: string };
export const getStaticProps: GetStaticProps<Props> = async () => {
const books = [{ id: 'web-basics', title: 'Web制作入門' }];
return { props: { books, builtAt: new Date().toISOString() } };
};
export default function Catalog({ books, builtAt }: InferGetStaticPropsType<typeof getStaticProps>) {
return <main><h1>書籍一覧</h1><p>生成日時: {builtAt}</p>
<ul>{books.map(book => <li key={book.id}>{book.title}</li>)}</ul></main>;
}実行結果と処理の順序
/catalog を開くと書籍と生成日時が表示されます。データを固定配列にしているため、外部サービスの準備なしで処理の流れを試せます。
本番ではビルド時に関数が動き、返したpropsからHTMLが作られます。開発モードは実行タイミングが異なるため、生成日時の固定を調べるときは本番ビルドを使ってください。
実務では配列をCMSやDBの取得結果へ置き換えます。取得失敗を空配列へ握りつぶすと、記事が消えた成果物を正常として公開してしまうため、失敗はビルド失敗として扱う設計も必要です。
つまずきやすい点と使い分け
サーバーで読む値と公開する値を分ける
環境変数からAPIキーを使って取得しても、キーをpropsへ入れれば公開されます。戻り値には画面に必要なフィールドだけを含めます。
ISRと静的出力を混同しない
revalidate による再生成は対応するサーバー環境で使う機能です。純粋な静的出力では、一定秒数が経過してもファイルが勝手に更新されることはありません。
静的出力で使えるか
この例はビルド時に値を確定できるため静的出力に組み込めます。CMS更新などで値を変えた場合は再ビルド・再配置が必要です。
確認課題と実務への応用
自分で値を変えて確認する
配列に書籍を追加し、ビルド前後のページを比較してください。続いてDateをそのままpropsへ返す誤りと、ISO文字列へ変換した場合の違いを確認します。
開発サーバーだけでなく、本番用ビルドと公開先でも確認します。URLを直接開く場合と画面内のリンクから遷移する場合、値がない場合と不正な値の場合を分けて試すと、型だけでは防げない入力の問題が見つかります。
公式資料と関連する記事
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。