VIDEO LESSON

Next.jsの関数・props・API一覧：機能別に使い方を調べるの解説動画

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

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

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

0:00こんにちは。
0:00今回はネクストジェイエスの関数・プロップス・エーピーアイ一覧です。
0:05この記事は、ネクストジェイエスの主要な機能を一テーマずつ学ぶためのリファレンスで、
0:11データ取得、ユーアールエル操作、ページのプロップス、エイチティーティーピー・エーピーアイから、
0:16必要な機能の個別記事へ進めるようになっています。
0:21個別記事は関数が十三本、プロップスが三本、エーピーアイが四本です。
0:26この動画では、記事を選ぶ前の確認点、機能の分類の見方、目的別の学習順、静的配信とサーバー実行の境界を、
0:31初心者向けに順に整理します。
0:35分からない機能に出会ったら、まずこの一覧に戻って分類を確認する、という使い方もできます。
0:42記事を選ぶ前に、まずルーターを確認します。
0:45アプリというフォルダーを使うアップルーターと、ページズというフォルダーを使うページズルーターでは、
0:50関数の配置とデータ取得の規約が異なります。
0:55アップルーターの記事は、ネクストジェイエス十五以降の非同期のリクエスト・エーピーアイを前提とし、
1:02ネクストジェイエス十六ではキャッシュ・コンポーネントを有効にしない基本構成を扱います。
1:09古いプロジェクトへコードをコピーする場合は、バージョンと対応機能を必ず確認してください。
1:15ここを飛ばすと、動かないコードを写してしまう原因になります。
1:20次に、三つの言葉の違いです。
1:22関数は、データ取得や画面遷移などの処理そのものです。
1:27プロップスは、コンポーネントへ値を渡す仕組みです。
1:32エイチティーティーピー・エーピーアイは、リクエストを受け取り、レスポンスを返す入口です。
1:40注意点として、ネクストリクエストなどはクラスを含むエーピーアイであり、すべてを通常の関数として呼ぶわけではありません。
1:51各記事では、引数、戻り値、実行場所を確認します。
1:55リアクトのプロップスやユースステートと、ネクストジェイエス固有のエーピーアイは、
2:00役割を分けて理解しましょう。
2:05関数の個別記事を、ルーター別に見ます。
2:08まずページズルーターです。
2:10ゲットスタティックプロップスは、ビルド時にデータを取得してページへ渡す関数です。
2:16ゲットスタティックパスは、動的なユーアールエルのうち、どのページを生成するかを列挙します。
2:24ゲットサーバーサイドプロップスは、リクエストごとにページを生成します。
2:29つまり、事前に作っておくのか、アクセスのたびに作るのかが分かれ目です。
2:35更新頻度と、誰のためのデータを出すかで選びます。
2:39詳しい書き方と型は、それぞれの個別記事で確認してください。
2:43三つの関数の名前が似ていても、実行されるタイミングがまったく違う点を押さえてください。
2:50アップルーター側です。
2:52ジェネレートスタティックパラムスは、動的ルートの値を列挙して、ページを静的に生成するための関数です。
2:58スライドのように、スラッグの配列から、スラッグを持つオブジェクトの配列を返します。
3:04ジェネレートメタデータは、記事や商品のデータから、ページごとのタイトル、
3:07説明、オージーピーを生成します。
3:10どちらもサーバー側で実行される点が共通です。
3:13ページズルーターのゲットスタティックパスと役割は似ていますが、書き方は互換ではないため、
3:17ルーターをそろえて読んでください。
3:21画面側のフックも整理します。
3:23ユースパスネームは現在のパスを読み、選択中のナビゲーション表示などに使います。
3:28ユースパラムスは、動的ルートのスラッグなどをクライアントコンポーネントで読みます。
3:34ユースサーチパラムスは、ユーアールエルの検索条件を読み書きします。
3:38ユースルーターは、ボタンから画面を切り替えたり、履歴を戻したり、リフレッシュしたりするためのフックです。
3:45読む対象が、パスか、動的部分か、検索条件かで使い分けます。
3:49なお、これらは認証や認可の代わりにはならないため、アクセス権はデータ取得側でも検証してください。
3:55サーバー側の制御です。
3:57リダイレクトは、サーバー側の条件で移動先を決める関数です。
4:01ノットファウンドは、存在しない記事や商品を、専用画面へ切り替えます。
4:07クッキーズはサーバーでクッキーを読み取り、更新します。
4:11ヘッダーズは、リクエストヘッダーをサーバーで読みます。
4:15これらは、ブラウザー側の表示操作ではなく、サーバーでの判断や情報取得に使う点がポイントです。
4:22存在しないデータと、通信障害は区別して扱い、エイチティーティーピー応答でも確認する習慣を付けましょう。
4:30実行場所がサーバーかどうかを先に確認すると、使える機能かどうかを判断しやすくなります。
4:37プロップスの個別記事は三本です。
4:39一本目は、サーバーコンポーネントからクライアントコンポーネントへ、安全に値を渡す境界の話です。
4:47二本目はページのプロップスで、パラムスとサーチパラムスの違いと、入力検証を扱います。
4:54スライドのように、アップルーターではパラムスがプロミスとして渡されるため、
4:58エイウェイトで解決してから使います。
5:03三本目はレイアウトのプロップスで、チルドレンとパラムスで共通画面を組み立てます。
5:09誰が、どの値を、いつ渡すのかを意識すると、型エラーで迷いにくくなります。
5:15エーピーアイの個別記事は四本です。
5:17アップルーターでは、ルートハンドラーズで、アプリ配下のエーピーアイにルート・ティーエスを置き、
5:22ゲットやポストの処理を作ります。
5:26ネクストリクエストは、ユーアールエル、クッキー、本文から入力を取り出すためのものです。
5:32ネクストレスポンスは、ジェイソン、クッキー、リダイレクトなどの応答を返します。
5:38ページズルーターのエイチティーティーピー・エーピーアイは、エーピーアイ・ルーツ入門の記事で扱います。
5:45入力の形、メソッド、コンテンツタイプ、ステータスを確認し、必要に応じて認証やレート制限、
5:50シーエスアールエフ対策も設計してください。
5:54目的から選ぶ学習順も紹介します。
5:57記事サイトを静的生成するなら、最初にゲットスタティックプロップスとゲットスタティックパス、
6:04またはジェネレートスタティックパラムスを学び、アップルーターではジェネレートメタデータでタイトルも設定します。
6:11シーエムエス取得が失敗した場合の動作も設計し、生成件数を確認してください。
6:17検索や画面遷移を作るなら、ユーアールエル系のフックとリンク、ユースルーターです。
6:22サーバーへデータを送るなら、アップルーターはルートハンドラーズ、ページズルーターはエーピーアイ・ルーツを使います。
6:31サンプルのエコー・エーピーアイは保存機能を持たず、テーマのクッキーはログインセッションではない点にも注意しましょう。
6:39最後に、静的配信とサーバー実行の境界です。
6:43ゲットサーバーサイドプロップス、リクエストごとのクッキーやヘッダー処理、
6:49ポストのエーピーアイなどは、ネクストジェイエスのサーバー実行環境が必要です。
6:54アウトと呼ばれる静的出力だけでは動きません。
6:58この一覧を掲載しているサイトの配信方式と、サンプルアプリを実行する方式は別であり、
7:03記事を読むためにサーバー移行は必要ありません。
7:08サンプルを試すときは、コードに書かれたパスへファイルを置き、対象ルーターのプロジェクトで開発サーバーを起動します。
7:17正常な値、欠けた値、不正な値を試した後、本番ビルドでも確認してください。
7:23これでリファレンスの使い方はつかめました。
7:26お疲れさまでした。

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

この動画で学べること

Next.jsの主要な関数・props・APIを機能別に解説。App RouterとPages Router、引数・戻り値、コード例、静的出力の制約から個別記事を探せます。

解説記事・サンプルコードを読む：Next.jsの関数・props・API一覧：機能別に使い方を調べる →