VIDEO LESSON

generateStaticParamsの使い方：App Routerで動的ページを静的生成するの解説動画

再生時間 7:35動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回は、ジェネレートスタティックパラムスの使い方です。
0:05商品ページや記事ページのように、ユーアールエルの一部だけが変わるページを動的ルートと呼びます。
0:12アクセスがあるたびにページを作るのではなく、あらかじめ用意できるページはビルド時に作っておきたいところです。
0:21そのために、どの値のページを作るのかを列挙するのが、ジェネレートスタティックパラムスです。
0:28速く表示できる静的なページと、値ごとに内容が変わる動的なページ、その両立が今回のテーマです。
0:35今回は、記事のコードを読みながら、列挙した値とページ本体のつながり、そして列挙しなかった値の扱いまで押さえます。
0:44まず前提です。
0:45この記事の例は、ネクストジェイエス十五以降の非同期リクエストエーピーアイに合わせた書き方です。
0:51ネクストジェイエス十六では、キャッシュコンポーネンツを有効にしない構成を前提とします。
0:57タイプスクリプトは五・二以降で、利用するネクストジェイエスが対応するノードジェイエスを使います。
1:04配置先は、アプリ直下にレイアウト・ティーエスエックスを備えたアップルーターのプロジェクトです。
1:11ページズルーターとは配置先も実行場所も異なるため、プロジェクトのルーターとバージョンを先に確認してください。
1:18この関数は、ビルド時に動的ルートの値を決める役割を持ちます。
1:22戻り値を整理します。
1:24ジェネレートスタティックパラムスが返すのは、パラメーターオブジェクトの配列です。
1:29たとえば、アプリ、プロダクツ、角括弧スラッグというフォルダーのページなら、
1:33スラッグという文字列を持つオブジェクトの配列を返します。
1:37ここで大切なのは、ページズルーターのゲットスタティックパスとは形が違うことです。
1:42パスとフォールバックをまとめたオブジェクトではありません。
1:46配列の中の一つひとつが、そのまま一ページ分の動的ルートの値になります。
1:50フォルダー名とオブジェクトのキーを一致させることが、基本の約束です。
1:55キーの名前をフォルダー名とそろえていないと、その値は正しいページに対応しません。
2:00戻り値を作るときは、フォルダー構成と並べて確認する習慣を付けてください。
2:05記事のコードの前半、列挙の部分です。
2:07ファイルは、アプリ、プロダクツ、角括弧スラッグというフォルダーのページ・ティーエスエックスです。
2:15まず、プロダクツという対応表に、ノートブックにはノート、ペンシルには鉛筆という名前が入っています。
2:22ジェネレートスタティックパラムスでは、この対応表のキーをすべて取り出し、
2:28一つひとつをスラッグというキーを持つオブジェクトに変換して返しています。
2:33データのキーが、そのまま生成するページのユーアールエルの値になる、という作りです。
2:40データを増やせば、列挙される値も一緒に増えます。
2:43コードの後半、ページ本体です。
2:45まず、ダイナミックパラムスをフォルスと宣言しています。
2:49これにより、列挙しなかった値は受け付けなくなります。
2:52ページ本体のプロダクトは非同期関数で、パラムスはスラッグという文字列を持つプロミスとして受け取ります。
2:59最初にパラムスをアウェイトしてスラッグを取り出し、対応表からその名前を引いて、
3:02見出しとして表示します。
3:05ネクストジェイエス十五以降はこのアウェイトする書き方が前提です。
3:09十四以前の同期パラムスの例を、そのまま最新構成へ移植しないでください。
3:14実行結果を確認します。
3:15ビルド時には、まずジェネレートスタティックパラムスが対応表のキーを列挙します。
3:21その結果、プロダクツ・スラッシュ・ノートブックと、プロダクツ・スラッシュ・ペンシルの二ページが生成対象になります。
3:29それぞれのページでは、スラッグに応じた名前が表示されます。
3:33一方、ダイナミックパラムスがフォルスなので、対応表にない値、たとえばペンのような未列挙のユーアールエルは受け付けません。
3:41列挙した分だけを作り、それ以外は作らない、という境界がはっきりしているのが、
3:44この組み合わせの特徴です。
3:48生成対象の一覧は、データそのものから決まります。
3:51対応表のキーとユーアールエルが一対一で対応しているかを見比べると、処理の順序が追いやすくなります。
3:58ページズルーターのゲットスタティックパスとの違いを整理します。
4:03役割は似ています。
4:04どちらも、動的ルートでどのユーアールエルを事前に作るのかを決める仕組みです。
4:10ただし、戻り値の形が違います。
4:12ゲットスタティックパスは、パスの一覧とフォールバックという設定をまとめたオブジェクトを返します。
4:20一方、アップルーターのジェネレートスタティックパラムスは、パラメーターの配列を直接返し、
4:26未列挙の値をどう扱うかは、ダイナミックパラムスという別の宣言で決めます。
4:33プロジェクトのルーターに合わせて、書き方を切り替えてください。
4:38つまずきやすい点の一つ目は、データの取得上限です。
4:42実務では、商品や記事のデータをシーエムエスから取得することが多くなります。
4:47ところが、一覧エーピーアイには一度に取得できる件数の上限がある場合があります。
4:53最初の百件だけを取得してパラメーターを返してしまうと、ビルド自体は成功しても、
4:58百一件目以降のページが作られません。
5:02対策は、全件をページ分割で取得し終えてから、パラメーターを返すことです。
5:08列挙の取りこぼしは、そのまま未生成のページになる、と覚えておいてください。
5:13件数が少ないうちは気付かなくても、データが増えた途端に不足が表面化します。
5:19運用が始まる前に、上限を超える件数でも試しておくと安心です。
5:24二つ目は、更新のタイミングです。
5:27ここで列挙するユーアールエルは、ビルド対象のスナップショット、つまりビルドした時点の一覧です。
5:35純粋な静的サイトでは、シーエムエスに商品を追加しても、そのユーアールエルがその場で生成されるわけではありません。
5:44今回の例は、ビルド時に値を確定できるため、静的出力に組み込めます。
5:50その代わり、シーエムエスの更新などで値を変えた場合は、再ビルドと再配置が必要です。
5:57公開後に新しいページが見当たらないときは、まず再ビルドが行われたかを確認しましょう。
6:04確認課題です。
6:05まず、三つ目の商品を対応表に追加して再ビルドし、ユーアールエルとページ内容が増えることを確認してください。
6:15あわせて、未列挙のユーアールエルが四百四として扱われるかも調べます。
6:21確認は、開発サーバーだけでなく、本番用ビルドと公開先でも行います。
6:27ユーアールエルを直接開く場合と、画面内のリンクから移る場合、値がない場合と不正な値の場合を分けて試すと、
6:33型だけでは防げない入力の問題が見つかります。
6:40小さな追加で、列挙、生成、拒否の三つの動きをまとめて確かめられます。
6:46三つの動きのうち一つでも期待と違えば、列挙の場所か、再ビルドの有無か、宣言の値か、
6:51原因を切り分けて記録しておきましょう。
6:57まとめです。
6:58ジェネレートスタティックパラムスは、アップルーターで動的ルートの値を列挙し、
7:02そのページをビルド時に静的生成するための関数です。
7:06戻り値はパラメーターオブジェクトの配列で、パスとフォールバックの形ではありません。
7:11ページ本体ではパラムスをアウェイトして値を使い、ダイナミックパラムスをフォルスにすれば未列挙の値を受け付けません。
7:19シーエムエスから取得するときは全件を取り切ること、そして追加や変更のあとは再ビルドが必要なことを忘れないでください。
7:27これでジェネレートスタティックパラムスは完了です。
7:30お疲れさまでした。
7:31次回はゲットサーバーサイドプロップスを学びます。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

generateStaticParamsで動的ルートの値を列挙する方法を解説します。Promise形式のparamsと、Pages RouterのgetStaticPathsとの違いを学びます。

解説記事・サンプルコードを読む：generateStaticParamsの使い方：App Routerで動的ページを静的生成する →