NextResponseの使い方：JSON・Cookie・リダイレクトを返す
NextResponseでレスポンスを作る方法を紹介します。JSON本文、ステータス、ヘッダー、レスポンスCookieを1つの例で理解します。
EXPLORE THE STACK
Next.js開発ノート
Next.jsの環境構築からページの実装まで。Reactを使ったWebアプリケーション開発を、実践的な記事で学べます。
Reactから、Webアプリの構築へ
Reactとの違い、App RouterとPages Router、SSR・SSG、公開までの流れを入門ガイドで整理。全体像を確認して、実装の記事へ進めます。
- Next.jsの役割とルーターの違い
- コンポーネント・データ取得・ページの生成
- 環境構築から公開までの学習順と実践記事
関数・props・APIから、使い方を調べる
19本の個別解説と既存のAPI Routes記事へ。App RouterとPages Router、実行場所、引数・戻り値をコード例で確認できます。
環境構築からページの公開まで、順番に学ぶ
初めての方は第1回から。ここではPages Routerの実践記事を中心に案内します。
記事一覧
33 ARTICLES
NextRequestの使い方：URL・Cookie・本文から入力を取り出す
NextRequestはWeb標準のRequestを拡張するAPIです。nextUrlで検索条件を読み、CookieとJSON本文の扱い、入力検証の境界を学びます。
Route Handlersの使い方：GET・POSTとJSONの入力検証
app/api配下のroute.tsでHTTP APIを作成します。GETとPOST、JSON解析の失敗、入力検証、400・415・422の応答を実例で確認します。
Layoutのprops：childrenとparamsで共通画面を組み立てる
layout.tsxのchildrenとparamsの役割を解説します。共有レイアウトが維持される仕組みと、searchParamsを受け取らない理由も学びます。
Pageのprops：params・searchParamsの違いと入力検証
App RouterのPageが受け取るparamsとsearchParamsを個別に整理します。Promiseの解決、配列になり得る検索条件、ページ番号の検証を実例で学びます。
Next.jsのprops：Server ComponentからClient Componentへ安全に渡す
propsはReactのデータ受け渡しの仕組みです。Next.jsではサーバーとブラウザーの境界が加わるため、渡せる値と公開される情報を意識して設計します。
headersの使い方：リクエストヘッダーをサーバーで読む
headersでアクセス時のヘッダーを読む方法を紹介します。読み取り専用のAPIと、レスポンスヘッダーの設定との違いを学びます。
cookiesの使い方：サーバーでCookieを読み取り・更新する
cookiesでリクエストのCookieを読む方法を解説します。非同期API、Server Componentと更新処理の違い、セッション値を扱う際の境界を確認します。
notFoundの使い方：存在しないデータを専用画面へ切り替える
notFoundで存在しない記事や商品を扱う方法を説明します。not-found.tsxとの組み合わせ、通信障害との区別、HTTP応答の確認まで学びます。
redirectの使い方：サーバー側の条件で移動先を決める
redirectでサーバー側からページ遷移を指示する方法を学びます。例外による制御、HTTPステータス、入力値を移動先へ使う際の注意点を解説します。
useParamsの使い方：動的ルートの値をClient Componentで読む
useParamsで動的ルートのslugを取得します。単一セグメントとcatch-allの型の違い、クエリ文字列との使い分けを説明します。
useSearchParamsの使い方：URLの検索条件を読み書きする
useSearchParamsで検索条件を読み、URLSearchParamsのコピーで更新する方法を解説します。静的ページのSuspenseと、複数値の扱いも確認します。
usePathnameの使い方：現在のパスでナビゲーションを切り替える
usePathnameで現在のパスを読み、選択中のナビゲーションを表示します。クエリ文字列との違いと、書き換えルールがある場合の注意点を学びます。
useRouterの使い方：App Routerの画面遷移・履歴・refresh
useRouterでボタンから画面を切り替える方法を解説します。push・replace・back・refreshの役割と、next/routerとの違いを確認します。
generateMetadataの使い方：ページごとのtitle・description・OGPを生成する
generateMetadataで記事や商品のデータから検索結果向け情報とOGPを生成します。ページ本文との一致、metadataBase、サーバーでの実行を確認します。
generateStaticParamsの使い方：App Routerで動的ページを静的生成する
generateStaticParamsで動的ルートの値を列挙する方法を解説します。Promise形式のparamsと、Pages RouterのgetStaticPathsとの違いを学びます。
getServerSidePropsの使い方：リクエストごとにページを生成する
getServerSidePropsでリクエストごとの値をページへ渡す方法を解説します。queryの検証、レスポンスヘッダー、SSGとの違いをコードで確認します。
getStaticPathsの使い方：動的URLの生成対象を列挙する
getStaticPathsで生成するURLを決め、getStaticPropsで各ページの内容を取得する役割分担を学びます。fallbackの違いと静的出力の制約も整理します。
getStaticPropsの使い方：ビルド時のデータをpropsへ渡す
getStaticPropsを単独の関数として学び、ビルド時のデータ取得、propsの型、公開される情報と秘密値の境界を確認します。
Next.jsの関数・props・API一覧：機能別に使い方を調べる
Next.jsの主要な関数・props・APIを機能別に解説。App RouterとPages Router、引数・戻り値、コード例、静的出力の制約から個別記事を探せます。
Next.jsとmicroCMSの公開・運用手順：WordPressからの移行で改ざんリスクを減らす
Next.jsとmicroCMSで静的サイトを構築し、既存サーバーへ公開し、WordPressからの移行で改ざんリスクを減らす手順。APIキー管理、初回公開、自動更新、監視、バックアップ、復旧まで解説。
Next.jsのuseContext入門：Providerでテーマと状態を共有する
Next.jsでuseContextを使い、テーマを共有する実践例を紹介。型付きProvider、専用Hook、更新と再描画、Pages RouterとApp Routerの配置の違いを解説します。
Next.jsのuseState実践：カウンター・フォーム・状態更新の注意点
Next.jsでuseStateを使う実践入門。カウンターと入力フォームから、型推論、関数による更新、オブジェクトの更新、Pages RouterとApp Routerの違いを解説します。
Next.jsのuseEffect実践：依存配列・後始末・SSRでの注意点
Next.jsのuseEffectをタイマーとブラウザイベントの例で解説。依存配列、クリーンアップ、Strict Mode、サーバー描画、非同期処理の注意点を学べます。
Next.jsのAPI Routes入門：GET・POST・入力検証とエラー応答
Next.jsのAPI RoutesをTypeScriptで実装。GET・POSTの処理、HTTPメソッドとJSON入力の検証、エラー応答、静的出力との違いを学べます。
Next.jsのSSG入門：getStaticProps・動的ルート・静的出力を解説
Next.jsのPages RouterでSSGを実装する方法を解説。getStaticPropsとgetStaticPaths、動的ルート、静的出力、データ更新とISRの違いを学べます。
Next.jsのSSR入門：getServerSideProps・キャッシュ・配信の注意点
Pages RouterのgetServerSidePropsでSSRを実装する方法を解説。リクエスト情報、props、キャッシュ、秘密情報の扱い、静的出力と併用できない理由を確認できます。
Next.jsのCSS入門：グローバルCSSとCSS Modulesの適用手順
Pages RouterでグローバルCSSとCSS Modulesを使う手順を解説。ファイルの配置、読み込み先、クラスの適用、スタイルの衝突を避ける考え方を紹介します。
Next.jsのコンポーネント実践：TypeScriptのpropsとコールバックで連携する
型付きpropsとコールバックで記事カードを作り、親ページで選択状態を管理します。ジェネリクスを使う一覧、安定したkey、コンポーネントの読み込み方も解説します。
Next.jsのコンポーネント入門：props・state・childrenを理解する
Next.jsのコンポーネントをTypeScriptで学ぶ入門記事。props・state・children、ページと部品の配置、型推論、App Routerでの境界をコードで解説します。
Next.jsのディレクトリ構成：pages・app・publicと各ファイルの役割
Next.jsのPages Routerのディレクトリ構成を解説。pages・public・components・lib・typesの役割、_appと_document、生成物とApp Routerの違いを整理します。
Next.jsとは？Reactとの違いとPages Routerの基本を解説
Next.jsの役割をPages Routerのコードで解説。SSG・SSR・ハイドレーションの違い、静的出力の制約、SEOや安全性を考える際の注意点を学べます。
Next.jsの環境構築：Pages Routerでインストールから起動まで
create-next-appでTypeScriptとPages Routerの学習環境を作成。Node.jsの要件、作成時の選択、ページ編集、開発サーバーと本番ビルドの手順を解説します。