Next.jsの関数・props・API一覧：機能別に使い方を調べる
Next.jsの主要な関数・props・APIを機能別に解説。App RouterとPages Router、引数・戻り値、コード例、静的出力の制約から個別記事を探せます。
Next.jsの主要機能を1テーマずつ学ぶためのリファレンスです。データ取得、URL操作、ページのprops、HTTP APIから、必要な機能の個別記事へ進めます。ReactのpropsやuseStateと、Next.js固有のAPIは役割を分けて理解しましょう。
記事を選ぶ前に
App RouterとPages Routerを確認する
app と pages では関数の配置とデータ取得の規約が異なります。App Routerの記事はNext.js 15以降の非同期リクエストAPIを前提とし、Next.js 16ではCache Componentsを有効にしない基本構成を扱います。古いプロジェクトへコピーする場合は、バージョンと対応機能を確認してください。
関数・props・APIの違い
関数はデータ取得や遷移などの処理、propsはコンポーネントへ値を渡す仕組み、HTTP APIはリクエストを受け取りレスポンスを返す入口です。NextRequestなどはクラスを含むAPIであり、すべてを通常の関数として呼ぶわけではありません。各記事で引数・戻り値・実行場所を確認します。
関数の個別記事
Pages Router
- getStaticPropsの使い方：ビルド時のデータをpropsへ渡す
- getStaticPathsの使い方：動的URLの生成対象を列挙する
- getServerSidePropsの使い方：リクエストごとにページを生成する
App Router
- generateStaticParamsの使い方：App Routerで動的ページを静的生成する
- generateMetadataの使い方：ページごとのtitle・description・OGPを生成する
- useRouterの使い方：App Routerの画面遷移・履歴・refresh
- usePathnameの使い方：現在のパスでナビゲーションを切り替える
- useSearchParamsの使い方：URLの検索条件を読み書きする
- useParamsの使い方：動的ルートの値をClient Componentで読む
- redirectの使い方：サーバー側の条件で移動先を決める
- notFoundの使い方：存在しないデータを専用画面へ切り替える
- cookiesの使い方：サーバーでCookieを読み取り・更新する
- headersの使い方：リクエストヘッダーをサーバーで読む
propsの個別記事
App Router
- Next.jsのprops：Server ComponentからClient Componentへ安全に渡す
- Pageのprops：params・searchParamsの違いと入力検証
- Layoutのprops：childrenとparamsで共通画面を組み立てる
APIの個別記事
App Router
- Route Handlersの使い方：GET・POSTとJSONの入力検証
- NextRequestの使い方：URL・Cookie・本文から入力を取り出す
- NextResponseの使い方：JSON・Cookie・リダイレクトを返す
Pages RouterのHTTP API
目的から選ぶ学習順
記事サイトを静的生成する
最初にgetStaticPropsとgetStaticPaths、またはgenerateStaticParamsを学びます。App RouterではgenerateMetadataでページ固有のタイトルを設定できます。CMS取得処理が失敗した場合の動作も設計し、生成件数を確認してください。
検索や画面遷移を作る
URLのパスはusePathname、動的セグメントはuseParams、検索条件はuseSearchParamsです。画面を移動するにはLinkやuseRouterを使います。どれも認証・認可の代わりにはならないため、アクセス権はデータ取得側でも検証します。
サーバーへデータを送る
App RouterはRoute Handlers、Pages RouterはAPI Routesを使います。入力の形、メソッド、Content-Type、ステータスを確認し、必要に応じて認証・レート制限・CSRF対策を設計します。サンプルのecho APIは保存機能を持たず、theme Cookieはログインセッションではありません。
静的配信とサーバー実行の境界
outだけでは動かない機能
getServerSideProps、リクエストごとのCookie・ヘッダー処理、POST APIなどはNext.jsのサーバー実行環境が必要です。この記事一覧を掲載しているサイトの配信方式と、サンプルアプリを実行する方式は別です。記事を読むためにサーバー移行は必要ありません。
サンプルの試し方
コードに書かれたパスへファイルを置き、対象ルーターのプロジェクトで開発サーバーを起動します。App Routerの例はTypeScript 5.2以降と、利用するNext.jsが対応するNode.jsを前提にします。説明に2ファイルある場合は両方作成してください。対象URLを直接開き、正常値・欠落値・不正値を試した後、本番ビルドでも確認します。同じURLへpageとrouteを重複配置しないようにします。
関連ガイドと公式資料
全体像から学ぶ
Googleの優先するニュース提供元にSEの部屋を追加
Googleで、いつも読みたい情報源を選べます。登録可否はGoogleの画面で確認できます。
候補にSEの部屋が表示されない場合は、まだ追加できません。