getStaticProps
getStaticProps
という関数をエクスポートすると、ビルド時にその関数から返される props を使用してページが事前レンダリングされます:
getStaticProps
で使用するためにトップレベルスコープでモジュールをインポートできます。インポートされたものはクライアントサイド用にバンドルされません。つまり、getStaticProps
内で直接サーバーサイドのコードを記述でき、データベースからのデータ取得も含まれます。
context パラメータ
context
パラメータは以下のキーを含むオブジェクトです:
名前 | 説明 |
---|---|
params | 動的ルート を使用するページのルートパラメータを含みます。例えば、ページ名が [id].js の場合、params は { id: ... } のようになります。これは後で説明する getStaticPaths と一緒に使用する必要があります。 |
preview | (非推奨、draftMode を使用) ページが プレビューモード にある場合 true 、それ以外は false 。 |
previewData | (非推奨、draftMode を使用) setPreviewData で設定された プレビュー データ。 |
draftMode | ページが ドラフトモード にある場合 true 、それ以外は false 。 |
locale | アクティブなロケールが含まれます(有効な場合)。 |
locales | サポートされているすべてのロケールが含まれます(有効な場合)。 |
defaultLocale | 設定されたデフォルトロケールが含まれます(有効な場合)。 |
revalidateReason | 関数が呼び出された理由を示します。以下のいずれかになります: "build"(ビルド時に実行)、"stale"(再検証期間が経過したか、開発モードで実行中)、"on-demand"(オンデマンド再検証 によってトリガー) |
getStaticProps の戻り値
getStaticProps
関数は props
、redirect
、または notFound
のいずれかを含むオブジェクトを返す必要があり、オプションで revalidate
プロパティを含めることができます。
props
props
オブジェクトはキーと値のペアで、各値はページコンポーネントによって受け取られます。シリアライズ可能なオブジェクトである必要があり、渡されるすべての props は JSON.stringify
でシリアライズ可能でなければなりません。
revalidate
revalidate
プロパティは、ページの再生成が可能になるまでの秒数です(デフォルトは false
または再検証なし)。
増分静的再生成 (ISR) について詳しく学びます。
ISR を活用したページのキャッシュステータスは、x-nextjs-cache
レスポンスヘッダーの値を読み取ることで確認できます。可能な値は以下の通りです:
MISS
- パスがキャッシュにありません(最初の訪問時に最大1回発生)STALE
- パスはキャッシュにありますが、再検証時間を超えたためバックグラウンドで更新されますHIT
- パスはキャッシュにあり、再検証時間を超えていません
notFound
notFound
ブール値により、ページは 404
ステータスと 404 ページ を返すことができます。notFound: true
の場合、以前に正常に生成されたページであっても 404
を返します。これは、著者によって削除されたユーザー生成コンテンツなどのユースケースをサポートするためのものです。なお、notFound
は ここで説明した のと同じ revalidate
動作に従います。
知っておくと良い:
fallback: false
モードではnotFound
は必要ありません。getStaticPaths
から返されたパスのみが事前レンダリングされるためです。
redirect
redirect
オブジェクトにより、内部または外部リソースへのリダイレクトが可能です。{ destination: string, permanent: boolean }
の形式に一致する必要があります。
まれなケースでは、古い HTTP
クライアントが適切にリダイレクトするためにカスタムステータスコードを割り当てる必要がある場合があります。そのような場合、permanent
プロパティの代わりに statusCode
プロパティを使用できますが、両方は使用できません。また、next.config.js
のリダイレクトと同様に basePath: false
を設定できます。
リダイレクトがビルド時にわかっている場合は、next.config.js
に追加する必要があります。
ファイルの読み込み: process.cwd()
の使用
getStaticProps
でファイルシステムから直接ファイルを読み取ることができます。
そのためには、ファイルへの完全なパスを取得する必要があります。
Next.js はコードを別のディレクトリにコンパイルするため、__dirname
を使用することはできません。返されるパスは Pages Router とは異なります。
代わりに、Next.js が実行されているディレクトリを返す process.cwd()
を使用できます。
バージョン履歴
バージョン | 変更点 |
---|---|
v13.4.0 | App Router が安定版となり、データフェッチングが簡素化されました |
v12.2.0 | オンデマンド増分静的再生成 が安定版になりました。 |
v12.1.0 | オンデマンド増分静的再生成 が追加されました(ベータ)。 |
v10.0.0 | locale 、locales 、defaultLocale 、notFound オプションが追加されました。 |
v10.0.0 | fallback: 'blocking' 戻り値オプションが追加されました。 |
v9.5.0 | 安定版 増分静的再生成 |
v9.3.0 | getStaticProps が導入されました。 |