VIDEO LESSON

Next.jsのSSG入門：getStaticProps・動的ルート・静的出力を解説の解説動画

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

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

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

0:00こんにちは。
0:00今回は、ネクストジェイエスのエスエスジー入門です。
0:04ページズルーターで、ゲットスタティックプロップスとゲットスタティックパス、
0:09動的ルートと静的出力を、タイプスクリプトの例で学びます。
0:14エスエスジーは、アクセスが来る前に、必要なデータを集めてエイチティーエムエルを生成しておく方法です。
0:22公開記事のように、多くの利用者へ同じ内容を届けるページに向いています。
0:27この記事はタイプスクリプトとページズルーターを前提にしています。
0:32アプリルーターのジェネレートスタティックパラムスとは書き方が異なるため、
0:37その点に注意しながら、全体の流れを順に確認していきます。
0:42まずエスエスジーの位置付けです。
0:45通常のサーバー生成では、リクエストのたびにページを作りますが、エスエスジーではビルドの時点でデータを取得し、
0:51エイチティーエムエルを完成させておきます。
0:57利用者がアクセスしたときは、出来上がったファイルを返すだけなので、表示が速く、
1:01サーバーへの負荷も抑えられます。
1:06一方で、内容は生成した時点のものになります。
1:09更新を反映するには再生成が必要です。
1:12頻繁に変わらない記事や製品紹介など、みんなに同じ内容を見せるページで力を発揮します。
1:19逆に、利用者ごとに違う内容や、常に最新でなければならない情報には向きにくい、
1:23という判断軸を持っておきましょう。
1:28最初の例は、生成日時を表示するページです。
1:31ファイルはビルドインフォ・ティーエスエックスです。
1:34ゲットスタティックプロップスは非同期関数で、戻り値のプロップスに、生成日時を文字列で入れています。
1:41ページコンポーネントは、そのプロップスを受け取って日時を表示します。
1:46ポイントは、日時オブジェクトをそのまま渡さず、アイエスオー文字列へ変換している点です。
1:52プロップスはジェイソンとして扱える値でなければならず、関数や日時オブジェクトのような、
1:56そのまま保存できない値は渡せません。
2:01この例では、ビルドを実行した時刻がそのままページに焼き込まれるため、生成のタイミングを目で確認できます。
2:08プロップスに渡す値の注意点です。
2:10ページへ渡したデータは、生成されたエイチティーエムエルや付随するデータとしてブラウザーから確認できます。
2:17そのため、秘密のエーピーアイキーや個人情報をプロップスに含めてはいけません。
2:22サーバー側で取得したデータをそのまま全部渡すのではなく、画面に必要な項目だけに絞ることが大切です。
2:29また、データ取得が不要なページは、ゲットスタティックプロップスを書かなくても、
2:33自動的に静的最適化の対象になることがあります。
2:37この関数は、ビルド時のデータ取得を明示する必要があるときに使うものだと理解しておくと、
2:41書くべき場所が判断しやすくなります。
2:45次は記事ごとのページです。
2:47ファイル名はポスツ配下のブラケットスラッグで、スラッグの部分が記事ごとに変わる動的ルートです。
2:54例では外部のエーピーアイを使わず、同じファイル内に二件の記事データを定義しています。
3:01ゲットスタティックパスは、生成するユーアールエルを列挙する役割で、ポスツ配列からスラッグを取り出し、
3:05パスとして返します。
3:10フォールバックはフォルスで、列挙していないユーアールエルには四百四を返します。
3:16つまり、どのページを作るかを決めるのがゲットスタティックパスです。
3:21記事が増えたら、この列挙に含めることが、ページ生成の前提になります。
3:26続いて、各ユーアールエルの中身を決めるのがゲットスタティックプロップスです。
3:32引数のパラムスからスラッグを受け取り、ポスツ配列の中から一致する記事を探します。
3:37見つからなければノットファウンド・トゥルーを返し、見つかればその記事をプロップスとしてページへ渡します。
3:44ページコンポーネントは、タイトルと本文を表示するだけです。
3:48このように、パスが生成対象を決め、プロップスが内容を決める、という役割分担が動的ルートの要点です。
3:55実際のシーエムエスとつなぐ場合も、ビルド中に一覧と本文を取得する流れは同じで、
4:00同じアプリのエーピーアイルーツへエイチティーティーピーでアクセスする必要はなく、
4:04サーバー用の取得処理を直接呼べます。
4:09作ったページを静的なファイルとして取り出すには、ネクストコンフィグにアウトプット・エクスポートを設定します。
4:15トレーリングスラッシュをトゥルーにすると、各ページがフォルダーとインデックス・エイチティーエムエルの形で出力されます。
4:23設定後にエヌピーエム・ラン・ビルドを実行すると、アウトフォルダーに、ビルドインフォや各記事のエイチティーエムエルが生成されます。
4:31配信先へはエイチティーエムエルだけでなく、アウト配下の内容をまとめて配置してください。
4:37シースエスやジャバスクリプトも含まれます。
4:39なお、現在の静的出力はこの設定とビルドで完結します。
4:43古い手順にある独立したネクストエクスポート・コマンドを、そのまま新しいバージョンへ適用しないよう注意しましょう。
4:50開発中の見え方に注意します。
4:52エヌピーエム・ラン・デブでは、ゲットスタティックプロップスがリクエスト時にも実行されます。
4:58そのため、ページを更新するたびに生成日時が変わっても、静的生成が失敗しているわけではありません。
5:04本番の挙動は、ビルド後のファイルで確認するのが正しい手順です。
5:08次にアイエスアールの違いです。
5:10ノードジェイエスのサーバーなどを使う配信では、リバリデートを指定したアイエスアールで、
5:14公開後にページを再生成できます。
5:18一方、静的出力で配置したファイルは、サーバーがネクストジェイエスのコードを実行しないため、
5:22アイエスアールは使えません。
5:25本文を更新したら、再ビルドと再配置が必要です。
5:28静的出力の運用で確認することです。
5:31まず、ゲットサーバーサイドプロップスや、ページズルーターのエーピーアイルーツは、
5:36リクエスト時のサーバー処理を前提にするため、静的出力では使いません。
5:42フォールバックのトゥルーやブロッキングも同様に使えません。
5:46次に画像です。
5:47ネクストイメージのデフォルトの最適化にはサーバーが必要なので、静的出力ではカスタムローダーやアンオプティマイズドなどを検討します。
5:56さらに、シーエムエスの取得に失敗したときに、空の記事を公開するのか、ビルド自体を失敗させるのかを決めておきます。
6:04公開本文であれば、失敗に気付ける設計の方が扱いやすいでしょう。
6:09記事数が増える場合は、取得件数の上限やページ分割、呼び出し制限の確認も必要です。
6:15公開範囲の線引きも大切です。
6:17認証が必要な利用者別のデータを、誰でも見られる公開エイチティーエムエルへ混ぜてはいけません。
6:25静的に生成する部分と、ログイン後に取得する部分を分けて設計します。
6:31一方で、エスエスジーのページでも、表示した後にブラウザーで検索やフォーム操作を実装することはできます。
6:39ただし、初期のエイチティーエムエルに必要な本文までブラウザーの取得待ちにしてしまうと、
6:45事前に生成しておく利点を活かしにくくなります。
6:51本文は事前生成で届け、操作や個別の情報だけを後から扱う、というバランスが基本です。
6:58最後に、シーエムエスの記事更新が表示されないときの確認です。
7:03静的出力では、シーエムエスを更新しただけで公開ファイルが書き換わるわけではありません。
7:10最新データを取得して再ビルドし、その出力が公開先へ反映されているかを確認します。
7:16それでも詳細ページへアクセスできない場合は、生成漏れを調べます。
7:21記事一覧に存在していても、ゲットスタティックパスで返すアイディーが漏れていれば、
7:26そのパスは生成されません。
7:30実際のユーアールエルと公開ファイルを照合してください。
7:35まとめです。
7:36ゲットスタティックパスが生成対象を決め、ゲットスタティックプロップスが内容を決める。
7:42更新は再ビルドで反映する。
7:45この流れを押さえれば、エスエスジーの基本は完成です。

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

この動画で学べること

Next.jsのPages RouterでSSGを実装する方法を解説。getStaticPropsとgetStaticPaths、動的ルート、静的出力、データ更新とISRの違いを学べます。