VIDEO LESSON

Next.jsとは？Reactとの違い・始め方・SSRとSSGを学ぶ入門ガイドの解説動画

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

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

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

0:00こんにちは。
0:00今回はネクストジェイエス入門ガイドです。
0:03ネクストジェイエスは、リアクトで作る画面に、ユーアールエルとページの対応、
0:09エイチティーエムエルの生成、データ取得、ビルドなどを組み合わせるフレームワークです。
0:15ブログや企業サイトから、ログイン後のウェブアプリまで幅広く使えます。
0:20この動画では、リアクトとの違い、二つのルーター、エスエスアールとエスエスジー、
0:25始め方、よくあるエラーを、初心者向けに順に整理します。
0:29全体像をつかんでから個別の記事へ進むと、迷いにくくなります。
0:34初めての方は全体像と始め方から、実装で困っている方はエラーの章を重点的に聞いてください。
0:40まず役割の違いです。
0:42リアクトは、コンポーネントを組み合わせてユーザーインターフェースを作るライブラリです。
0:48一方ネクストジェイエスは、そのリアクトを使いながら、ページとユーアールエルの対応、
0:53サーバーでの処理、配信ファイルの生成といった、アプリを組み立てる機能を提供します。
0:59たとえば記事カードの見た目やクリック動作はリアクトで作り、記事ごとのユーアールエルや公開時のエイチティーエムエル生成はネクストジェイエスが担います。
1:09プロップスやステートの考え方はそのまま使えるので、担当を分けて考えると不具合の調査範囲が絞れます。
1:16ネクストジェイエスが向いているのは、公開ページと操作する画面を組み合わせるウェブサービス、
1:22シーエムエスの記事を配信するサイト、共通レイアウトを持つアプリなどです。
1:28ただし、導入すれば自動で速くなったり、内容の品質が上がったりするわけではありません。
1:34小さな静的ページでは、機能が過剰になることもあります。
1:38判断の出発点は、必要なユーアールエル、更新頻度、ログインの有無、通信先、
1:42配信環境を書き出すことです。
1:46必要な機能が見えてから構成を選ぶと、後からの作り直しを減らせます。
1:51次に二つのルーターです。
1:52アップルーターではアプリ配下のページ・ティーエスエックスやレイアウトを使い、
1:57ページズルーターではページズ配下のインデックスやアンダースコアエーピーピーを使います。
2:01どちらもリアクトのコンポーネントを使いますが、データ取得やメタデータの書き方は同じではありません。
2:07ページズルーターのゲットスタティックプロップスを、アップルーターのページにそのまま追加することはできません。
2:13検索したサンプルがどちらのルーターと、どのバージョン向けかを確認する習慣が大切です。
2:18このサイトの既存十二記事はページズルーター中心なので、実習前に構成をそろえてください。
2:23始め方です。
2:24開発にはノードジェイエスとパッケージ管理ツールが必要で、記事が確認した時点の最低要件はノードジェイエス二十・九以上です。
2:33作成コマンドはエヌピーエックス、クリエイト・ネクスト・アップです。
2:38選択肢ではタイプスクリプトを有効にし、アップルーターとエスアールシーを使う構成を選ぶ例を記事は示しています。
2:46スライドは最初のページの例です。
2:49見出しと本文を持つシンプルなコンポーネントで、保存後にブラウザーで表示されれば編集が反映されています。
2:57開発表示だけでなく、本番ビルドが成功するかも合わせて確認してください。
3:02コンポーネントの基本です。
3:04プロップスは親から子へ渡す値、ステートはコンポーネントが記憶する状態です。
3:09配列やオブジェクトを更新するときは、元の値を直接書き換えず、新しい値を作ります。
3:14アップルーターでクリック処理やユースステートを使う部品は、クライアントコンポーネントの境界に置きます。
3:21スライドのカウンターは、先頭にユースクライアントと書き、ボタンのクリックで回数を増やします。
3:27操作する部分だけを部品に分ければ、ページ全体に境界を広げずに済みます。
3:32なおユースクライアントは、初回表示をブラウザーだけで描くという意味ではありません。
3:37描画方式を整理します。
3:39エスエスジーは事前にエイチティーエムエルを生成する方法で、公開記事のように多くの人へ同じ内容を見せるページに向いています。
3:49エスエスアールはリクエストに応じてサーバーで生成する方法で、要求ごとの情報が必要な場合の候補です。
3:58シーエスアールはブラウザー側でデータを取得して画面を更新する方法です。
4:03一つのアプリで組み合わせることもできます。
4:07選ぶ基準は名称ではなく、いつ、誰のためのデータを表示するかです。
4:12更新頻度に加えて、初回表示に必要な内容、通信失敗時の表示、キャッシュの共有範囲まで考えてください。
4:21記事を更新しても表示が変わらないときは、原因を一つに決めつけません。
4:26シーエムエス側のデータ、ビルド時点のデータ、ネクストジェイエスのキャッシュ、
4:30シーディーエヌ、ブラウザーのキャッシュを順に確認します。
4:35静的に書き出したサイトでは、通常は再ビルドとファイルの再配置が必要です。
4:40アイエスアールのような再生成の仕組みは便利ですが、実行環境と構成が対応しているかを確認して使います。
4:48アップルーターのキャッシュ設定はバージョンや方式で異なるため、古い記事の既定動作をそのまま前提にせず、
4:53公式資料とプロジェクト設定を照合してください。
4:58エスイーオーと配信はセットです。
5:01ページタイトル、内容を要約した説明、正規ユーアールエルはページごとに設定し、
5:04見出しの階層もそろえます。
5:07アップルーターではメタデータエーピーアイ、ページズルーターではネクスト・ヘッドなど、
5:13構成に合う方法を選び、同じ情報を重複して出さないよう生成されたエイチティーエムエルで確認します。
5:20配信では、アウトプット・エクスポートによる静的出力はファイルを置くだけで配信できますが、
5:24エスエスアールやページズルーターのエーピーアイ・ルーツのようにサーバー実行が必要な機能は、
5:29そのままでは動きません。
5:33公開先が実行できる機能を、実装前に確認してください。
5:37よくあるエラーです。
5:38ウィンドウやドキュメントが見つからないのは、サーバーにブラウザーの機能がないためです。
5:44描画中に直接参照せず、クライアントコンポーネントのエフェクトやイベントの中に置きます。
5:50ハイドレーションの不一致は、サーバー生成のエイチティーエムエルとブラウザーの最初の描画が違うときに起きます。
5:58時刻、乱数、保存済み設定、不正な入れ子を確認し、初期値をそろえます。
6:03四百四やシーエスエス未適用ではルーターと配置場所を、ビルド失敗では外部エーピーアイへの到達、
6:07環境変数、型エラーを確認します。
6:12警告を消す設定を先に入れるより、どの値が違うのかを特定することが近道です。
6:17最後に学習の進め方です。
6:19まず環境構築とディレクトリ構成を確認し、コンポーネントとシーエスエスへ進みます。
6:24自分で作った部品をページに表示し、プロップスを変えて表示が変われば基礎がつながっています。
6:30次にユースステート、ユースエフェクト、ユースコンテキストで状態と外部環境を扱い、
6:35その後エスエスジー、エスエスアール、エーピーアイ・ルーツで、データをいつ取得し、
6:40どのサーバーで動かすかを説明できる状態を目指します。
6:45正常な操作だけでなく、空データ、通信失敗、再読み込みも試してください。
6:50リアクトを学んでから始める必要はなく、並行して学べますが、コンポーネントとプロップスとステートの基礎は先に押さえると理解が速くなります。
6:59これでネクストジェイエスの全体像はつかめました。
7:03お疲れさまでした。

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

この動画で学べること

Next.jsとは何か、Reactとの違い、環境構築、App RouterとPages Router、SSR・SSG、エラー対処を解説。コード例と学習順から、必要な実践記事へ進めます。

解説記事・サンプルコードを読む：Next.jsとは？Reactとの違い・始め方・SSRとSSGを学ぶ入門ガイド →