VIDEO LESSON

Next.jsとは？Reactとの違いとPages Routerの基本を解説の解説動画

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

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

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

0:00こんにちは。
0:00今回は、ネクストジェイエスとは何か、リアクトとの違いとページズルーターの基本を解説します。
0:07リアクトは、画面の部品を作るためのライブラリです。
0:11一方ネクストジェイエスは、その画面に、ユーアールエルに応じたページ表示、
0:17エイチティーエムエルの事前生成、データ取得、ビルドといった仕組みを加えるフレームワークです。
0:23画面だけか、アプリ全体か、という役割の違いが最初のポイントです。
0:28この記事はページズルーターを前提に、タイプスクリプトのコードで確認していきます。
0:34ネクストジェイエスでできることを並べてみます。
0:38ファイルの配置からユーアールエルを決めるルーティング、リアクトの画面をあらかじめ描く事前レンダリング、
0:45ページ間の移動、シーエスエス・モジュールズ、タイプスクリプトの支援などです。
0:52サーバーを動かす構成では、エーピーアイ・ルーツでエイチティーティーピーリクエストを処理することもできます。
1:01つまり、画面作りだけでなく、公開に必要な周辺の仕組みまでを一つの枠組みで揃えられるのが特徴です。
1:08ただし、使える機能は公開方法によって変わる点に注意してください。
1:13学習の進め方としては、まずページの作り方と生成方式を押さえ、次にデータ取得や公開方法へ進むと、
1:18全体像を見失いにくくなります。
1:23ページズルーターの基本です。
1:25エスアールシー・ページズ・インデックス・ティーエスエックスがトップページ、
1:31エスアールシー・ページズ・アバウト・ティーエスエックスがスラッシュ・アバウトに対応します。
1:37再利用する部品は、エスアールシー・コンポーネンツなどへ置いてページから読み込みます。
1:43この部品用フォルダーの名前は自由です。
1:46画面の例はアバウトページで、見出しと説明文、そしてトップへ戻るリンクを置いています。
1:52リンクに使うリンクはネクストジェイエスの部品で、ネクスト13以降の通常の書き方では、
1:56子要素にエータグを重ねる必要はありません。
2:01エイチティーエムエルの生成方式を見ます。
2:04まずエスエスジー、静的サイト生成です。
2:06ビルド時にページのエイチティーエムエルを作っておく方法を指します。
2:11似た言葉の静的サイトジェネレーターは生成ツールそのものを指すので、方式とは区別してください。
2:17公開記事、製品の説明、会社案内など、あらかじめ内容を取得でき、多くの利用者へ同じ情報を配信するページに向いています。
2:25リクエストのたびに取得し直す必要がなく、生成物をキャッシュしやすい点が利点です。
2:31一方、本文を更新するには、静的出力では再ビルドと再配置が必要になります。
2:36大量のページを一度に生成する場合は、取得先の負荷や生成にかかる時間も計画に入れておくと安心です。
2:43エスエスジーのコード例です。
2:45ビルドインフォというページで、生成した日時を表示します。
2:48ゲットスタティックプロップスがビルド環境で実行され、返した値を使ってエイチティーエムエルが生成されます。
2:55開発サーバーでは確認のためにリクエスト時に再実行されるので、本番と同じタイミングだと思わないでください。
3:02アイエスアールを使うサーバー構成では、公開後の再生成も可能です。
3:07また、エスエスジーでもフォーム操作やブラウザからのデータ取得はできます。
3:11ただし、大量のページや遅い外部エーピーアイは、ビルド時間に影響する点も覚えておきましょう。
3:18次はエスエスアール、サーバーサイドレンダリングです。
3:21ページズルーターではゲットサーバーサイドプロップスを使い、リクエストに応じたデータからエイチティーエムエルを作れます。
3:30ログイン状態などのリクエスト情報が必要なページや、その時点の情報を返したいページで検討します。
3:37ただし注意点もあります。
3:38エスエスアールでは、外部エーピーアイの応答待ちやサーバー処理の時間もレスポンスに含まれます。
3:45導入すれば必ずエスエスジーやブラウザ描画より速くなるわけではありません。
3:50取得するデータ量、キャッシュ、配信環境を含めて測定することが大切です。
3:55エスエスアールのコード例です。
3:58リクエストインフォというページで、サーバーが処理した日時を表示します。
4:02ゲットサーバーサイドプロップスの中で、レスポンスヘッダーにキャッシュコントロール、
4:08プライベート・ノーストアを指定し、共有キャッシュへ残さないようにしています。
4:14このページはネクストジェイエスのサーバーが必要で、後で説明する静的出力のアウトプット・エクスポートとは併用できません。
4:22エスエスジーの例と並べると、ビルド時に一度だけ実行されるのか、リクエストごとに実行されるのか、
4:27という実行タイミングの違いがはっきりします。
4:31ブラウザ側の処理との関係です。
4:34サーバーやビルド環境が作ったエイチティーエムエルを受け取った後、リアクトがブラウザ上でイベント処理などを結び付けます。
4:41この処理をハイドレーションと呼びます。
4:44エスエスジーやエスエスアールのページでも、ボタンの操作や入力欄の更新にはブラウザ側のジャバスクリプトが必要です。
4:52ウィンドウ、ドキュメント、ローカルストレージはブラウザのエーピーアイです。
4:57描画する関数の中で無条件に読み取ると、サーバー側でエラーになることがあります。
5:02ブラウザとの同期にはユーズエフェクトを使い、最初の表示が一致するよう設計しましょう。
5:08サーバーで作る画面とブラウザで作る画面がずれてしまうと、表示のちらつきや警告の原因にもなるため、
5:12この一致は実務でも大切な確認ポイントです。
5:17エイチティーエムエル、シーエスエス、ジャバスクリプトだけをウェブサーバーへ置きたい場合は、
5:21ネクストコンフィグで静的出力を有効にします。
5:26画面の設定は、アウトプットにエクスポート、トレイリングスラッシュを真にする例です。
5:32この設定でビルドを実行すると、アウトフォルダーへ配信用ファイルが出力されます。
5:37ただし、先ほどのエスエスアールのページはこの構成に含められません。
5:41ページズルーターのエーピーアイ・ルーツ、アイエスアール、既定の画像最適化サーバーも静的出力では利用できません。
5:49必要なら外部エーピーアイや画像配信サービスを組み合わせます。
5:53エスイーオーや安全性について、誤解しやすい点を整理します。
5:57エスエスジーとエスエスアールは、初期エイチティーエムエルに主要な文章を含める手段です。
6:03検索順位やエーアイ検索への掲載を保証する機能ではありません。
6:08記事の正確さ、読みやすい見出し、ページ固有のタイトル、正しいリンク、クロールできる配信状態も整える必要があります。
6:16また、エスエスアールがクロスサイトスクリプティングを自動的に防ぐわけでもありません。
6:22ゲットスタティックプロップスなどの内部で秘密のエーピーキーを使うことはできますが、
6:27返したプロップスはブラウザへ送られます。
6:31秘密情報を返す値に含めないことが大切です。
6:34最後に、導入前の確認とまとめです。
6:36公開するページ、利用者ごとの表示、更新頻度、公開先を先に整理してください。
6:41エスエスアールやエーピーアイが必要かどうかによって配信環境が変わるため、
6:45画面のコードだけで導入方法を決めないことが大切です。
6:49また、この記事はページズルーターを中心に説明しています。
6:53アプリルーターのアプリ・ページ・ティーエスエックスを使うプロジェクトでは、
6:57データ取得やメタデータの書き方も対応する資料へ切り替えてください。
7:02リアクトに土台を足すのがネクストジェイエス、生成方式と公開方法をセットで選ぶ、
7:05というのが今回のまとめです。

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

この動画で学べること

Next.jsの役割をPages Routerのコードで解説。SSG・SSR・ハイドレーションの違い、静的出力の制約、SEOや安全性を考える際の注意点を学べます。

解説記事・サンプルコードを読む：Next.jsとは？Reactとの違いとPages Routerの基本を解説 →