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

Next.jsとは何か

Reactとの違いを役割で理解する

Reactは、コンポーネントを組み合わせてUIを作るライブラリです。Next.jsはReactを利用し、URLとページの対応、サーバーでの処理、配信するファイルの生成など、アプリケーションを組み立てる機能を提供します。Reactで学ぶprops、state、イベント処理の考え方はNext.jsでも使います。

例えば記事カードの見た目とクリック時の動作はReactのコンポーネントで作り、記事ごとのURLや公開時のHTML生成をNext.jsで扱えます。TypeScriptを併用すれば、propsや取得データの型も表せます。どのツールが何を担当するかを区別すると、不具合を調べる範囲が絞れます。

向いている用途と導入前の判断

公開ページと操作する画面を組み合わせるWebサービス、CMSの記事を配信するサイト、共通レイアウトを持つアプリなどで利用できます。一方、小さな静的ページに必要な機能や、チームが運用できるサーバー構成も考える必要があります。フレームワークを導入するだけで、内容の品質や応答速度が保証されるわけではありません。

まず必要なURL、更新頻度、ログインの有無、通信先、配信環境を書き出してください。Next.jsの基本を確認する記事とNext.js公式ドキュメントを入口に、必要な機能を選べます。

App RouterとPages Routerの違い

ファイルの場所で使用中の構成を確認する

App Routerではapp/page.tsxやapp/layout.tsx、Pages Routerではpages/index.tsxやpages/_app.tsxを使います。src/配下に置く構成もあります。App RouterはServer Componentsなどを利用する構成で、新しく学ぶ際は公式のApp Routerガイドが入口になります。Pages Routerで作られた既存アプリを保守する場合には、そのAPIと配置規則を確認します。

両方でReactのコンポーネントを使いますが、データ取得やメタデータの書き方は同じではありません。Pages RouterのgetStaticPropsやgetServerSidePropsを、App Routerのapp/page.tsxにそのまま追加することはできません。検索したサンプルが、どちらのルーターとバージョンを対象にしているかを確認してください。

このサイトの記事を読む順序

既存記事と同じ構成で試したい方は、Pages Routerの環境構築から始めます。ディレクトリ構成でファイルの役割を確認してから、コンポーネント、状態管理、データ取得へ進むと、設定とコードの関係を追えます。

App Routerで作る場合は、公式のレイアウトとページの説明も参照してください。一つの実習の途中でルーターを切り替えると、ファイルの配置や使える関数が変わります。

Next.jsの始め方と環境構築

Node.jsとプロジェクトの条件を確認する

Next.jsの開発にはNode.jsとパッケージ管理ツールを用意します。2026年9月に確認した公式インストールガイドの最低要件はNode.js 20.9以上です。導入時は、最低要件に加えて、サポート中のNode.jsと利用するライブラリの対応を確認してください。既存プロジェクトではpackage.jsonやロックファイルの指定を優先します。

node --version
npm --version

ここでは新しい学習用フォルダーを作ります。以下のコマンドの後に設定の選択が表示された場合は、TypeScriptを有効にし、App Routerとsrc/を使用する構成を選びます。この章の例はApp Router用で、後述の既存記事のPages Router実習とは配置が異なります。

npx create-next-app@latest next-learning --ts --use-npm
cd next-learning
npm run dev

質問の順番や初期値はCLIのバージョンで変わります。作成後にsrc/app/page.tsxとsrc/app/layout.tsxがあるかを確認してください。src/を使わない場合はapp/直下が対象です。開発サーバーのURLはターミナルに表示され、停止はCtrl+Cです。公式のインストール手順で、その時点の条件を確認できます。

最初のページを表示する

src/app/page.tsxを次の内容にします。プロジェクト作成時に生成されたルートレイアウトは残してください。

export default function HomePage() {
  const lessons = [
    { id: "routing", title: "ページとURLの関係" },
    { id: "components", title: "Reactの部品設計" },
  ];

  return (
    <main>
      <h1>Next.js学習ノート</h1>
      <p>小さなページから仕組みを確かめます。</p>
      <ul>
        {lessons.map(lesson => (
          <li key={lesson.id}>{lesson.title}</li>
        ))}
      </ul>
    </main>
  );
}

保存してブラウザーに見出しと2件の項目が表示されれば、編集したページが読み込まれています。配列の要素には安定したkeyを指定します。開発中の表示を確認したら、開発サーバーを停止し、npm run buildで本番用の生成が成功するかも確認してください。通常のNode.js配信では、ビルド後にnpm run startで本番サーバーを起動できます。

このページの短い例は型チェックと描画を確認しています。生成ツールの最新版を使う場合は、実際に作成されたプロジェクトでもビルドしてください。このサイトの既存記事の実習環境はNext.js 13.5.11・React 18・TypeScript 4.9.4です。

コンポーネントと状態管理の基本

propsとstateを使い分ける

propsは親から子へ渡す値、stateはコンポーネントが記憶する状態です。受け取ったデータをどこで変更するのか、複数の部品で同じ状態を使う必要があるのかを考えて配置します。配列やオブジェクトをstateに持つ場合は、元の値を直接書き換えず、新しい値を作って更新します。

コンポーネントの基礎で役割を確認し、型付きpropsとコールバックの実装で親と子を連携させます。useStateの実践では、カウンターや入力フォームを使って更新を確かめられます。

App Routerのクライアント境界

App Routerでクリック処理やuseStateを使う部品は、Client Componentの境界に置きます。例えばsrc/app/Counter.tsxを次のように作成できます。

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <section aria-label="練習カウンター">
      <p aria-live="polite">回数: {count}</p>
      <button type="button" onClick={() => setCount(value => value + 1)}>
        1増やす
      </button>
    </section>
  );
}

前のsrc/app/page.tsxにimport Counter from "./Counter";を追加し、main内へ<Counter />を置くと使えます。操作する部分を部品へ分けることで、ページ全体にクライアント向けの境界を広げずに構成できます。"use client"は「初回表示を含めてブラウザーでしか描画しない」という指定ではありません。

詳しい境界は公式のServer ComponentsとClient Componentsの説明を参照してください。ブラウザーAPIとの同期はuseEffect、複数の部品への値の共有はuseContextで実習できます。

SSR・SSG・CSRとデータ更新

HTMLを作るタイミングを選ぶ

SSGは事前にHTMLを生成する方法で、公開記事のように多くの人へ同じ内容を見せるページに適しています。SSRはリクエストに応じてサーバーでHTMLを生成する方法で、要求ごとの情報が必要な場合に候補になります。CSRはブラウザー側でデータを取得して画面を構築・更新する方法です。一つのアプリでも目的に応じて組み合わせられます。

最初に「いつ、誰のためのデータを表示するか」を決めます。更新頻度だけでなく、初回表示に必要な内容、通信失敗時の表示、キャッシュの共有範囲も検討してください。SSRでも、その結果を適切にキャッシュする構成はあり、名称だけで常に最新・常に高速と判断できません。

Pages Routerの具体例はSSGと動的ルート、SSRとリクエスト時の処理、公式の整理はRenderingを参照してください。

キャッシュと再生成を確認する

記事を更新しても表示が変わらないときは、CMSだけでなく、ビルド時点のデータ、Next.jsのキャッシュ、CDN、ブラウザーのキャッシュを順に確認します。静的に書き出したサイトでは、通常は再ビルドとファイルの再配置が必要です。

ISRのような再生成の仕組みは、実行環境と構成の対応を確認して利用します。App Routerのキャッシュ設定は、使用バージョンや採用する方式で異なります。古い記事の既定動作をそのまま前提にせず、公式のキャッシュ解説とプロジェクトの設定を照合してください。

SEO・メタデータ・配信方法

ページ内容に対応する情報を設定する

ページタイトル、内容を要約した説明、正規URLをページごとに設定します。見出しはタイトルから章・詳細へ階層を揃え、関連記事は内容が伝わるリンク文言で結びます。検索エンジンやAIによる情報の参照を意識する場合も、冒頭の明確な説明、検証可能な根拠、更新日、読める本文が土台になります。

App RouterではMetadata API、Pages Routerではnext/headや対応するSEOライブラリなど、構成に合う方法を選びます。同じ情報を複数の仕組みから重複出力しないよう、生成されたHTMLで確認してください。公式のメタデータとOG画像の説明でApp Routerの扱いを確認できます。

構造化データは、実際に表示している記事やパンくずと一致させます。Next.jsや特定のライブラリを使ったこと自体で、検索順位やAIの回答への採用が決まるわけではありません。利用者の疑問に答える本文と、正しく参照できるURLを整えます。

静的出力とサーバー配信を区別する

output: "export"を設定する静的出力では、ビルド時に公開用のファイルを生成します。Apacheなどでファイルを配信する用途に使えます。SSRやPages RouterのAPI Routesのように、リクエスト時のNext.jsサーバーが必要な機能は、そのまま静的ファイルだけでは動かせません。

このサイトも静的に出力したファイルを公開しています。記事で紹介するSSRやAPIの実習は、対応する別の開発環境で試す内容です。必要な機能を追加するときは、ページの実装だけでなく配信方式も見直してください。Pages Routerの静的出力とApp Routerの静的出力では、利用できる機能が説明されています。

APIの基本はAPI Routesの実装記事で確認できます。App RouterのRoute Handlersにはビルド時に生成できるケースもありますが、認証付きPOSTなどの動的な処理と混同しないようにします。

よくあるエラーと解決の進め方

windowやdocumentが見つからない

サーバーにはブラウザーのwindowやdocumentがありません。描画中に直接参照せず、必要なブラウザー処理をClient ComponentのEffectやイベントハンドラーに配置します。単に"use client"を付ければ、どの位置でもブラウザーAPIを読めるようになるわけではありません。

useEffectの記事では、画面の幅やタイマーを扱い、イベント登録を解除するところまで試せます。描画に必要な値と、外部環境との同期を分けることが出発点です。

ハイドレーションの不一致が出る

サーバーが生成したHTMLと、ブラウザーでの最初の描画結果が異なる場合に発生します。現在時刻、乱数、保存済みのブラウザー設定、HTML要素の不正な入れ子などを確認します。初期値を揃え、ブラウザーでしか分からない値は必要に応じて後から反映します。

警告を抑える設定を先に追加するより、どの値や要素が違うのかを特定してください。公式のハイドレーションエラー解説に代表的な原因があります。

ページが404になる・CSSが適用されない

まず使用中のルーター、配置場所、ファイル名を確認します。静的出力した動的ルートなら、ビルド時に必要なパスを生成できているかも調べます。公開ファイルが存在するのに404になる場合は、WebサーバーのURLとファイルの対応を確認します。

CSS Modulesでは.module.cssから読み込んだオブジェクトのプロパティをclassNameへ渡します。グローバルCSSの読み込み先はルーターに合わせます。CSSの適用手順とディレクトリ構成を照合すると、配置の間違いを見つけやすくなります。

開発では動くのにビルドで失敗する

ビルド時に外部APIへ到達できるか、必要な環境変数があるか、型エラーが残っていないかを確認します。サーバー用の秘密情報をクライアントへ渡したり、公開用の環境変数へ変更して解決しようとしたりしないでください。

失敗した処理を小さく切り出し、ビルドの終了コードとログを確認します。生成物が以前から残っている場合もあるため、ファイルがあるだけで成功とは判断できません。型チェック、ビルド、実際の配信先でのアクセス確認を分けて行います。

学習ロードマップと既存記事の選び方

入門からページの実装へ進む

まずNext.jsとは、インストール、ディレクトリ構成を読みます。次にコンポーネントの基礎、作成と使い回し、CSSへ進んでください。自分で作った部品をページに表示し、propsを変えて表示が変われば基礎がつながっています。

操作・データ取得・公開を組み合わせる

useState、useEffect、useContextで状態と外部環境を扱います。その後、SSG、SSR、API Routesを読み、データをいつ取得するか、どのサーバーで動かすかを説明できる状態を目指します。

コードをそのまま動かした後は、空データ、通信失敗、部品の取り外し、ページの再読み込みも試してください。正常な一回の操作だけでは、アプリケーションの状態管理や配信の問題に気づかない場合があります。

よくある質問と公式資料

Reactを学んでから始める必要がありますか？

並行して学べますが、コンポーネント、props、state、イベントの知識は必要です。画面更新の仕組みが分からない場合はReactの基礎へ戻り、URLやHTMLの生成に関する疑問はNext.jsの資料で確認すると整理できます。

App RouterとPages Routerのどちらを選びますか？

新規学習では公式のApp Routerガイドを出発点にできます。既存アプリの保守や、このサイトの12記事を実習する場合はPages Routerの構成を確認します。使っているライブラリや移行の影響もあるため、ファイルを一括で移動するだけの切り替えは避けてください。

HTMLを出力すればAPIも公開できますか？

静的HTMLの配置だけでは、Pages RouterのAPI RoutesやSSRの実行環境は作れません。サーバーが必要な機能はNode.jsなどの対応環境で動かすか、外部のAPIサービスとして用意します。採用するホスティングで何が実行できるかを確認してください。

公式ドキュメントはどこから読みますか？

公式の学習コースで全体を学び、困っている機能のドキュメントへ進みます。バージョン、ルーター、実行環境を揃えてサンプルを試してください。設定を変更する場合は、対応するビルドと公開結果まで確認すると理解が定着します。