ページへデータを渡す
ページに使うデータは、metadataやgetStaticData()からpropsとして渡せます。ここではAPIを使わず、お知らせの配列をページへ渡して一覧を作ります。
Table of Contents
metadataとgetStaticDataを使い分ける
metadataには、タイトルや下書きの指定など、固定のページ情報を書きます。
import type { Metadata } from "minista/types"
export const metadata: Metadata = { title: "お知らせ" }getStaticData()は、ページの描画に使うデータを用意する非同期関数です。ページファイルからexportし、{ props: { ... } }を返すと、その値がページのpropsに加わります。APIやファイルからデータを読み込む処理も、この関数で実行できます。
import type { GetStaticData } from "minista/types"
export const getStaticData: GetStaticData = async () => ({
props: {
notices: [
{ id: "hello", title: "サイトを公開しました" },
{ id: "update", title: "サービス紹介を追加しました" },
],
},
})どちらもページの表示に使うデータですが、metadataは固定情報、getStaticData()は処理を経て用意するデータに使うと整理しやすくなります。
お知らせの配列を渡す
これまで作ったsrc/pages/news/index.tsxを、次の内容に変更します。pluginSsg()を設定した構成で利用でき、追加のプラグインは不要です。
import type { Metadata, GetStaticData, PageProps } from "minista/types"
type Notice = { id: string; title: string }
type Props = PageProps & { notices: Notice[] }
export const metadata: Metadata = { title: "お知らせ" }
export const getStaticData: GetStaticData = async () => ({
props: {
notices: [
{ id: "hello", title: "サイトを公開しました" },
{ id: "update", title: "サービス紹介を追加しました" },
],
},
})
export default function News({ title, notices }: Props) {
return (
<>
<h1>{title}</h1>
<ul>
{notices.map((notice) => (
<li key={notice.id}>{notice.title}</li>
))}
</ul>
</>
)
}titleはmetadataから、noticesはgetStaticData()から受け取ります。独自のpropsには、PagePropsへ型を追加して使います。
レイアウトにも、同じデータを渡せます。
getStaticData()のpropsにもtitleなどを指定できます。同じ項目をmetadataとpropsの両方に指定した場合は、propsの値が優先されます。
構成と出力を確認する
この段階ではページの内容だけを変更します。以下は説明に関係するファイルを示しています。
src/pages/
└── news/
└── index.tsxdist/news/
└── index.htmlnpm run buildで、お知らせ一覧がdist/news/index.htmlに出力されます。配列の各項目から別のページが生成されるわけではありません。
<h1>お知らせ</h1>
<ul>
<li>サイトを公開しました</li>
<li>サービス紹介を追加しました</li>
</ul>実行タイミングと公開するデータ
getStaticData()は開発中のページ表示、本番ビルド、check inspectで実行されます。公開サイトへのアクセスごとに実行される関数ではありません。ビルド後に元のデータを変更した場合は、再ビルドしてHTMLを更新します。
データの取得処理はブラウザで実行されませんが、propsの値はHTMLやIslandなどへ出力するために使われます。APIの認証情報は取得処理の中だけで使い、propsには公開してよいデータを返してください。
型と返り値の契約はpluginSsgを参照してください。APIを使わない場合は、レイアウトへ進めます。
次はAPIによるページ生成で、APIからの取得とデータごとのページ生成を紹介します。