Next.jsとは？使い方入門｜Reactとの違いをJSオフで実測【v16】

Next.js のアプリは、ブラウザから届いたリクエストに対して、サーバー側で React のコンポーネントを描画し、HTML と「画面の設計図（RSC ペイロード）」を返します。ブラウザは、ボタンなど動く部分（Client Components）にだけ JavaScript をつなぎます。

flowchart TD
    B[ブラウザ] -->|URL を開く| S[Next.js サーバー]
    S --> SC[Server Components を描画<br>DB・API をここで読む]
    SC --> H[中身入りの HTML<br>＋RSC ペイロード]
    H --> B2[ブラウザに表示]
    B2 --> CC[Client Components だけ<br>JS をつなぐ]

よく調べられることの答えを先にまとめます。

確認環境：Ubuntu 24.04.5 LTS の上で、Node.js 22.23.4・npm 10.9.9 を使い、最初のコマンドより前に環境変数 NEXT_TELEMETRY_DISABLED=1 を設定してから npx create-next-app@16.4.3 でプロジェクトを作りました（next telemetry status は「Disabled」）。入ったのは Next.js 16.4.3・React 19.3.0・TypeScript 5.9.3・Tailwind CSS 4 です。記事データを返すモック API（Node.js の http モジュールで自作、応答を 300ms 遅らせる）を 127.0.0.1 に立て、ページ・レイアウト・Server Components・Client Components・データ取得・Route Handlers を書いて next dev・next build・next start を 127.0.0.1 の専用ポートで動かしました。ブラウザでの表示・クリック・JavaScript を切った表示・開発時のエラー画面は Chromium 153.0.8010.12（playwright-core 1.63.0）で確かめています。デプロイ先・サポート期間・React 公式の推奨・Astro と React Router の仕様は、各公式ドキュメントで確かめました。図は mermaid 11.16.0 で描画を確かめています（確認日 2026年10月29日）。

Next.jsとは（Reactのフレームワーク）

この節では、Next.js が何をするソフトで、誰が作り、いまどの版なのかが分かります。

Next.js は、Vercel 社が開発している、React を土台にした Web アプリのフレームワーク（骨組み）です。ライセンスは MIT で、無料で使えます。React の公式サイトは、React で新しくアプリやサイトを作るときは「フレームワークから始めること」を勧めており、その最初に Next.js（App Router）を挙げています。

React そのものは「画面の部品（コンポーネント）を作る」ためのライブラリです。実際のアプリには、URL ごとのページの切り替え、サーバーでのデータの読み込み、API、本番用のビルド、画像やフォントの最適化が要ります。Next.js は、これらを決まった書き方で最初から用意しています。

版とサポート期間

Next.js の公式のサポート方針では、2026年10月29日時点で 16.x が Active LTS（2025年10月21日公開）、15.x が Maintenance LTS です。15.x のセキュリティ修正は 2027年1月31日まで続くと案内されています。14.x 以前はサポート外です。毎日公開される canary 版は、本番で使わないよう書かれています。

何が作れるか

会社のサイト・ブログ・EC・会員制の Web アプリ・管理画面・SaaS の画面まで、React で作れるものは一通り作れます。Next.js 公式のショーケースには、Nike・OpenAI・Claude・Netflix Jobs・Zapier・Sonos などのサイトが載っています（2026年10月29日時点の表示）。

App Router の機能を順に深く追う手順は、関連記事「Next.js App Router 入門｜v16対応・実際のビルド結果つき」で扱っています。この記事は全体の地図として、各機能の入口と選び方をまとめます。

ReactだけとNext.jsの違い（JavaScriptを切って実測）

この節では、React だけで作ったページと Next.js のページが、ブラウザにどう届くのかの違いが、実際の表示で分かります。

違いは「最初に届く HTML に中身が入っているか」です。React だけのアプリ（Vite で作る SPA など）は、ほぼ空の HTML を返し、ブラウザで JavaScript を動かしてから中身を作ります。Next.js は、サーバーで描画した中身入りの HTML を返します。

同じ Next.js のアプリの中に、ブラウザだけでデータを読む「React だけと同じ作り」のページ（/csr。"use client" と useEffect で取得）と、Server Component のページを用意し、Chromium で JavaScript を無効にして 開きました。

noJS /:          "ホーム 概要 記事一覧 ダッシュボード Next.js 入門デモ このページは Server Component です。 クリック：0"
noJS /posts:     "ホーム 概要 記事一覧 ダッシュボード Next.jsを始める Server Components Route Handlers"
noJS /dashboard: "ホーム 概要 記事一覧 ダッシュボード ダッシュボード 読み込み中…"
noJS /csr:       "ホーム 概要 記事一覧 ダッシュボード"

検索エンジンのクローラーや SNS のリンクのプレビューは、最初の HTML を読みます。中身が HTML に入っていることが、Next.js が「SEO に強い」と言われる理由です。

Next.jsの主な機能（特徴とメリット・デメリット）

この節では、Next.js に最初から入っている機能と、選ぶときに知っておきたい弱点が分かります。

このほか、Link による先読み（プリフェッチ）、ページごとの自動のコード分割、国際化（多言語のルーティング）、Proxy（以前の Middleware）、OpenTelemetry での計測などがあります。

デメリット・注意点

• 覚えることが多い：Server と Client の境目、キャッシュ、ストリーミングなど、React だけにない考え方がある。
• 版ごとの変化が大きい：Pages Router から App Router、キャッシュの仕組み（Cache Components）など、書き方が大きく変わってきた。検索で見つかる以前の記事のコードが今の版で動かないことがある。
• サーバーが要る機能がある：Cookie を読む・リクエストごとに描画する機能は、静的ファイルだけのホスティングでは動かない。
• 大きさ：手元では node_modules が作成直後で 481MB（next 本体 206MB、ビルド用の SWC バイナリ 97MB）になった。
• 状態管理は含まれない：画面の状態は React の useState・useContext か、Zustand などを足す。

Next.jsのインストールと始め方（create-next-app）

この節では、Next.js のプロジェクトを作って開発サーバーを動かすまでの手順と、実際の出力が分かります。

export NEXT_TELEMETRY_DISABLED=1          # 最初の実行より前に
npx create-next-app@latest my-app --yes
cd my-app
npm run dev

手元の実行結果です（16.4.3。--use-npm --disable-git も付けています）。

Creating a new Next.js app in /dev/shm/t41/myapp.

Using npm.

Initializing project with template: app-tw

Installing dependencies:
- next
- react
- react-dom

Installing devDependencies:
- @tailwindcss/turbopack
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
- tailwindcss
- typescript

added 364 packages, and audited 365 packages in 47s

Generating route types...
✓ Types generated successfully

Success! Created myapp at /dev/shm/t41/myapp

質問に答えて作る場合の選択肢

--yes を付けないと、まず「推奨の設定を使うか」を聞かれます。公式ドキュメントに載っている質問は次のとおりです。

What is your project named? my-app
Would you like to use the recommended Next.js defaults?
    Yes, use recommended defaults - TypeScript, ESLint, No React Compiler, Tailwind CSS, No src/ directory, App Router, Cache Components, AGENTS.md
    No, reuse previous settings
    No, customize settings - Choose your own preferences

npx create-next-app@latest --help で、質問を飛ばすオプション（--ts・--tailwind・--eslint・--biome・--app・--src-dir・--empty・--api・--use-pnpm など）が一覧で出ます。手元の 16.4.3 では --agent-feedback・--no-agent-feedback という項目もありました。

作成直後にできたもの

16.4.3 の推奨設定では、next.config.ts に cacheComponents: true と partialPrefetching: true が最初から入っていました。AGENTS.md には、AI のエージェントに対して「node_modules/next/dist/docs/ の同梱ドキュメントを読んでから書くように」という案内が書かれ、実際にその場所に 4.4MB の Markdown のドキュメントが入っていました。

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  cacheComponents: true,
  partialPrefetching: true,
  turbopack: {
    rules: {
      "*.css": {
        loaders: ["@tailwindcss/turbopack"],
        as: "*.css",
      },
    },
  },
};

export default nextConfig;

package.json の scripts は、dev（開発サーバー）・build（本番用のビルド）・start（本番サーバー）・lint（ESLint）の4つです。Next.js 16 から next build は ESLint を自動では動かさないため、npm run lint を別に実行します（公式ドキュメント）。

Next.jsのプロジェクト構成（appフォルダーとファイルの決まり）

この節では、Next.js のフォルダーとファイルの名前の決まりと、App Router と Pages Router の違いが分かります。

App Router では、app フォルダーの中のフォルダーが URL になり、決まった名前のファイルが役割を持ちます。手元で作ったデモアプリの構成です。

myapp/
├── app/
│   ├── layout.tsx            … 全ページ共通の外枠（html と body）
│   ├── page.tsx              … /
│   ├── globals.css
│   ├── about/page.tsx        … /about
│   ├── posts/page.tsx        … /posts（一覧）
│   ├── posts/[id]/page.tsx   … /posts/1 など（動的ルート）
│   ├── dashboard/page.tsx    … /dashboard（Cookie を読む）
│   ├── csr/page.tsx          … /csr（ブラウザだけで取得）
│   └── api/hello/route.ts    … /api/hello（API）
├── components/Counter.tsx    … "use client" の部品
├── public/                   … 画像などをそのまま配る
├── next.config.ts
├── tsconfig.json
└── package.json

フォルダー名にも決まりがあります。[id] は動的な値、[...slug] は残りの全部、(group) は URL に出ないまとまり、_private は公開しないフォルダー、@slot は Parallel Routes の差し込み口です。

error.tsx と not-found.tsx の動きは関連記事「Next.jsのエラーハンドリング｜error.tsxとnot-foundを実測」で、@slot を使ったモーダルは関連記事「Next.js Parallel・Intercepting Routesでモーダル実装」で扱っています。

App Router と Pages Router の違い

Next.js には2つのルーターがあります。公式ドキュメントは、App Router を React の新しい機能（Server Components など）を使う新しいルーター、Pages Router を「元からあるルーターで、今もサポートされ改善が続いている」と説明しています。

検索で getServerSideProps や pages/_app.js が出てくる記事は Pages Router の書き方です。両方を同じプロジェクトに置いて、少しずつ移すこともできます（公式の移行ガイド）。

ページ・レイアウト・Linkの使い方（ルーティング）

この節では、ページを増やし、共通の外枠を作り、ページ間を移動する書き方と、移動のときに裏で何が起きるかが分かります。

ルートの layout.tsx に、全ページで使うナビゲーションを書きました。metadata でタイトルの型も決めています。

import type { Metadata } from "next";
import Link from "next/link";
import "./globals.css";

export const metadata: Metadata = {
  title: { default: "Next.js 入門デモ", template: "%s | Next.js 入門デモ" },
  description: "App Router の動きを確かめるデモ",
};

export default function RootLayout({ children }: LayoutProps<"/">) {
  return (
    <html lang="ja">
      <body className="p-6">
        <nav className="flex gap-4 border-b pb-2 mb-4">
          <Link href="/">ホーム</Link>
          <Link href="/about">概要</Link>
          <Link href="/posts">記事一覧</Link>
          <Link href="/dashboard">ダッシュボード</Link>
        </nav>
        {children}
      </body>
    </html>
  );
}

// app/about/page.tsx → /about
export const metadata = { title: "概要" };

export default function About() {
  return <p>Next.js は React のフレームワークです。</p>;
}

LayoutProps<"/">・PageProps<"/posts/[id]"> は、Next.js がルートから自動で作る型です。create-next-app の最後の「Generating route types...」がこれを作っています。

Link で移動すると、ページ全体は読み直さない

トップページで window.__marker = 'kept' を入れてから「記事一覧」のリンクを押し、移動後に値が残るかと、裏のリクエストを Chromium で記録しました。

after Link click url= /posts marker= kept
   req GET /posts/1?_rsc=pQ1of4f_wOzXz5Ba fetch rsc=1
   req GET /posts/2?_rsc=pQ1of4f_wOzXz5Ba fetch rsc=1
   req GET /posts/3?_rsc=pQ1of4f_wOzXz5Ba fetch rsc=1
   req GET /posts/1?_rsc=iakcPMFMs4m-a8D7 fetch rsc=1

• marker が残った：HTML の読み直しではなく、React が画面の差分だけを入れ替えた。
• ?_rsc= の fetch：移動先の中身を RSC ペイロードとして取りに行っている。
• /posts/1〜3 の先読み：一覧に表示された Link の行き先を、押す前に取りに行った（プリフェッチ）。

普通の <a href> で書くと、移動のたびにページ全体を読み直します。サイト内の移動には Link を使います。

ページごとのタイトル・説明文・OG 画像・sitemap の作り方は、関連記事「Next.jsのメタデータとSEO設定｜sitemap・OG画像まで実出力つき」で扱っています。

Server ComponentsとClient Components（"use client"の使い方）

この節では、Next.js の部品が「サーバーで動くもの」と「ブラウザでも動くもの」に分かれる理由と、"use client" を付ける場所が分かります。

App Router の部品は、何も書かなければ Server Component です。サーバーで一度だけ描画され、その部品の JavaScript はブラウザに送られません。クリックや入力に反応する部品だけ、ファイルの先頭に "use client" を書いて Client Component にします。

// components/Counter.tsx（Client Component）
"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button className="border px-3 py-1 mt-2" onClick={() => setCount(count + 1)}>
      クリック：{count}
    </button>
  );
}

// app/page.tsx（Server Component のまま、Client Component を中に置く）
import Counter from "@/components/Counter";

export default function Home() {
  return (
    <main>
      <h1 className="text-2xl font-bold">Next.js 入門デモ</h1>
      <p>このページは Server Component です。</p>
      <Counter />
    </main>
  );
}

Chromium でボタンを3回押すと「クリック：3」になりました。開発サーバーで Counter.tsx の「クリック：」を「押した回数：」に書き換えて保存すると、83ms 後に「押した回数：3」と表示が変わり、数（3）もページの変数も残っていました（Fast Refresh）。

• 1"use client" はできるだけ末端の部品に付けるページ全体に付けると、その下の部品の JavaScript がすべてブラウザに送られる
• 2Server から Client へ渡す props は JSON にできる値だけ関数（onClick など）は渡せない。ビルドでエラーになった（後述）
• 3API キーなどは Server Component で使うNEXT_PUBLIC_ で始まる環境変数だけがブラウザ側に入る
• 4サーバーとブラウザで違う値を描かないMath.random()・現在時刻・typeof window の分岐はハイドレーションエラーの原因

データ取得とキャッシュ（fetch・use cache・Suspense）

この節では、Next.js でデータを読む書き方と、キャッシュする場合・しない場合で速さとアクセス数がどう変わるかが、計測で分かります。

Server Component は async にでき、そのまま await fetch() や DB の呼び出しを書けます。16.4 の推奨設定（Cache Components）では、結果を使い回したい関数に "use cache" を書き、毎回新しく読みたい部分は <Suspense> で囲みます。

// app/posts/page.tsx（キャッシュする一覧）
import Link from "next/link";
import { cacheLife } from "next/cache";

type Post = { id: number; title: string; body: string };

async function getPosts(): Promise<Post[]> {
  "use cache";
  cacheLife("minutes");
  const res = await fetch("http://127.0.0.1:45742/posts");
  return res.json();
}

export default async function Posts() {
  const posts = await getPosts();
  return (
    <ul>
      {posts.map((p) => (
        <li key={p.id}><Link href={`/posts/${p.id}`}>{p.title}</Link></li>
      ))}
    </ul>
  );
}

// app/posts/[id]/page.tsx（キャッシュしない詳細。Suspense の中で読む）
import { notFound } from "next/navigation";
import { Suspense } from "react";

async function Post({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const res = await fetch(`http://127.0.0.1:45742/posts/${id}`);
  if (!res.ok) notFound();
  const post = await res.json();
  return <article><h1 className="text-xl">{post.title}</h1><p>{post.body}</p></article>;
}

export default function Page({ params }: PageProps<"/posts/[id]">) {
  return (
    <Suspense fallback={<p>読み込み中…</p>}>
      <Post params={params} />
    </Suspense>
  );
}

next start で動かし、curl で続けて開いたときの応答時間と、モック API に届いた回数です。

$ for i in 1 2 3 4 5; do curl -s -o /dev/null -w '%{http_code} %{time_total}s\n' http://127.0.0.1:45741/posts; done
200 0.002568s   (x-nextjs-cache: HIT)
200 0.003674s
200 0.001894s
200 0.001864s
200 0.001790s
mock hits during 5 requests: 0

$ for i in 1 2 3; do curl -s -o /dev/null -w '%{http_code} %{time_total}s\n' http://127.0.0.1:45741/posts/2; done
200 0.323035s
200 0.319817s
200 0.328951s
posts/2 hits: 3

キャッシュした一覧は、ビルドのときに作った HTML をそのまま返し、API には届きませんでした。キャッシュしない詳細は、API の遅れ（300ms）がそのまま応答時間に乗りました。

ストリーミング：外枠を先に返し、中身を後から流す

/posts/2 の応答を、届いた順に時刻を付けて記録しました。

chunk1 +12ms 1761B [fallback 読み込み中…あり]
chunk2 +21ms 5742B [fallback 読み込み中…あり]
chunk3 +321ms 237B  [本文あり]
chunk4 +324ms 73B
chunk5 +324ms 984B  [本文あり]
chunk6 +334ms 5471B
chunk7 +334ms 14B
end 335 ms

外枠と「読み込み中…」は 12ms で届き、本文は API の応答を待って 321ms に届きました。ブラウザは最初の部分から表示を始めるため、遅いデータがあってもページ全体が白いまま待つことはありません。

キャッシュの細かい使い分けは関連記事「Next.js use cacheの使い方｜Cache Components実測ガイド」で扱っています。

Route HandlersとServer Actions（APIとフォームの作り方）

この節では、Next.js の中で API を作る方法と、フォームの送信を受ける方法の入口が分かります。

app/api/hello/route.ts に GET という名前の関数を書くと、/api/hello が API になります。Web 標準の Request と Response を使います。

// app/api/hello/route.ts
export async function GET(request: Request) {
  const name = new URL(request.url).searchParams.get("name") ?? "world";
  return Response.json({ message: `hello ${name}` });
}

$ curl -i 'http://127.0.0.1:45741/api/hello?name=RJC'
HTTP/1.1 200 OK
vary: rsc, next-router-state-tree, next-router-prefetch, next-router-segment-prefetch
content-type: application/json
Transfer-Encoding: chunked

{"message":"hello RJC"}

同じアプリの画面から呼ぶだけなら、API を作らずに Server Component で直接データを読むほうが手順が少なくなります。フォームの登録・更新・削除と、その安全対策は関連記事「Next.js Server Actionsの使い方｜CRUDテンプレートと安全対策」で、API の CRUD と CORS は関連記事「Next.js Route HandlersでAPIの作り方｜CRUD・CORS実例」で扱っています。

next buildの出力の読み方（SSG・SSR・ISR・PPRとの対応）

この節では、next build が表示する ○ ◐ ƒ の意味と、よく聞く SSG・SSR・ISR・CSR が Next.js のどの書き方にあたるのかが分かります。

$ npm run build
▲ Next.js 16.4.3 (Turbopack)
✓ Running next.config.ts took 32ms
- Cache Components enabled
- Partial Prefetching enabled

  Creating an optimized production build ...
✓ Compiled successfully in 11.8s
  Running TypeScript ...
  Finished TypeScript in 4.3s ...
  Collecting page data using 1 worker ...
✓ Generating static pages using 1 worker (12/12) in 759ms
  Finalizing page optimization ...

Route (app)        Revalidate  Expire
┌ ○ /
├ ○ /_not-found
├ ○ /about
├ ƒ /api/hello
├ ƒ /api/posts
├ ○ /csr
├ ◐ /dashboard
├ ○ /hydration
├ ○ /posts                 1m      1h
└   /posts/[id]
  └ ◐ /posts/[id]

○  (Static)             prerendered as static content
◐  (Partial Prerender)  prerendered as static HTML with dynamic server-streamed content
ƒ  (Dynamic)            server-rendered on demand

CSR（ブラウザで描画）は、ページの作りではなく部品の作りで決まります。/csr は「○」でしたが、中身は useEffect でブラウザが取りに行っていました。○ だから中身まで HTML に入っている、とは限りません。

計測した数字

• どのページも、ブラウザが読んだ JavaScript は同じ7ファイル（React と Next.js のルーター）でした。/csr と /hydration だけ、Client Component の分の1ファイルが増えました。
• 本番サーバーの起動は「Ready in 197ms」、開発サーバーは「Ready in 887ms」でした。開発サーバーでは最初に開いたページだけ組み立てに 2.95 秒かかり、2回目は 0.09 秒でした。
• / の応答ヘッダーには x-nextjs-cache: HIT・Cache-Control: s-maxage=31536000・X-Powered-By: Next.js が付き、Cookie を読む /dashboard は Cache-Control: private, no-cache, no-store, max-age=0, must-revalidate でした。

Next.js 16 で変わった点の一覧は、関連記事「Next.js 16 新機能まとめ｜16.3までの変更点と移行を実測」で扱っています。

Next.jsのデプロイ方法（Vercel・Node.js・Docker・静的書き出し）

この節では、作った Next.js のアプリをどこに公開できるかと、それぞれで使える機能の違いが分かります。

公式ドキュメント（Deploying）は、公開の方法を4つに分けています。

公式ドキュメントには、Cloudflare と Netlify は公開のアダプターの仕組み（Adapter API）で検証済みのアダプターを作っているところで、それまでは各社の連携機能があると書かれています。AWS Amplify Hosting・Firebase App Hosting・Deno Deploy なども、独自の連携として載っています（2026年10月29日時点）。

静的書き出しにすると何ができなくなるか

手元のデモに output: "export" を足してビルドすると、API のルートで止まりました。

Error: export const dynamic = "force-static"/export const revalidate not configured on route "/api/hello" with "output: export". See more info here: https://nextjs.org/docs/advanced-features/static-html-export

> Build error occurred
Error: Failed to collect page data for /api/hello

静的書き出しは、静的なファイルを置けるだけの場所でも公開できる代わりに、Cookie を読む・リクエストごとに描画する・API などの機能が使えません。サーバーが要らないサイト（会社案内・ドキュメント）に向いています。

• 1本番で動かす前に npm run build を通す開発サーバーで動いても、ビルドの事前描画で初めて出るエラーがある
• 2環境変数を公開先に設定する.env.local は Git に入れない。NEXT_PUBLIC_ はブラウザに見える
• 3LTS の版を使い、セキュリティ修正を追うnpx next upgrade で上げられる。上げると同梱ドキュメントも新しくなる

Docker の output: "standalone" でイメージを小さくする手順は、関連記事「Next.jsをDockerでデプロイ｜standaloneで421MB→63MB」で扱っています。

Vite+React・React Router・Astroとの違い（判断表）

この節では、Next.js と並んで候補になるツールとの違いと、どれを選ぶかの決め方が分かります。

React 公式の「Creating a React App」は、フレームワークとして Next.js（Vercel が保守）、React Router（Shopify が保守。Vite と組み合わせる）、Expo（ネイティブアプリ）を挙げています。React Router の Framework モードは、Vite のプラグインとして SPA・SSR・静的の描画を選べると公式に書かれています。Remix は、v3 として出す予定だったものを React Router v7 として出すと 2024年5月に発表しています。Astro は、既定で部品を HTML と CSS にして JavaScript を取り除き、client:load などを付けた部品だけを動かす（アイランド）と公式に書かれています。

学ぶ順番と、次に読む個別記事

1. 1HTML・CSS・JavaScript の基本非同期（Promise・async/await）まで
2. 2React の基本JSX・props・useState・useEffect
3. 3TypeScript の基本型の書き方。create-next-app の既定が TypeScript
4. 4App Router の骨組みpage・layout・Link・Server と Client の境目
5. 5データ取得・キャッシュ・フォームuse cache・Suspense・Server Actions
6. 6エラー・メタデータ・認証・デプロイ本番に出す前の仕上げ

Next.jsのよくあるエラーと直し方（原文つき）

この節では、Next.js を始めたときに出やすいエラーの原文と、直し方が分かります。すべて手元の 16.4.3 で出したものです。

"use client" を書き忘れた

./app/err1/page.tsx:1:10
Error: You're importing a module that depends on `useState` into a React Server Component module. This API is only available in Client Components. To fix, mark the file (or its parent) with the `"use client"` directive.
    Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
> 1 | import { useState } from "react";
    |          ^^^^^^^^

ページ全体に "use client" を付けても直りますが、そのページの部品がすべてブラウザに送られます。ボタンの部分だけを別のファイルに分け、そこに付けるほうが送る量が減ります。

Server Component から関数を渡した

Error occurred prerendering page "/err2". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Event handlers cannot be passed to Client Component props.
  {onDone: function onDone}
           ^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

サーバーからブラウザへは、JSON にできる値（文字・数・配列・オブジェクト）しか渡せません。関数は Client Component の中で作ります。フォームの送信をサーバーで受けたいときは Server Actions を使います。

window is not defined

Error occurred prerendering page "/err3". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: window is not defined
    at <unknown> (app/err3/page.tsx:2:17)
> 2 |   const width = window.innerWidth;
    |                 ^

Server Component はサーバー（Node.js）で動くため、window・document・localStorage がありません。Client Component の useEffect の中で読みます。Client Component でも、最初の描画はサーバーで行われる点に注意します。

ハイドレーションエラー（Hydration failed）

Client Component に typeof window === "undefined" ? "サーバーで描画" : "ブラウザで描画" と書き、開発サーバーで開くと、画面に Next.js のエラー表示が出ました。

Recoverable Error
Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:

- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.

It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.

client/server diff
  <Where>
    <p>
+     ブラウザで描画
-     サーバーで描画

サーバーで作った HTML は「サーバーで描画」、ブラウザの最初の描画は「ブラウザで描画」で、食い違ったため React がその部分を作り直しました。ブラウザでしか分からない値は、useEffect の中で state に入れて、2回目の描画で表示します。エラーの文言のとおり、ブラウザの拡張機能が HTML を書き換えて起きることもあるため、シークレットウィンドウでも確かめます。

Suspense の外で動的なデータを読んだ（Cache Components）

Error: Route "/posts/[id]": Next.js encountered uncached or runtime data during prerendering.

`fetch(...)`, `cookies()`, `headers()`, `params`, `searchParams`, or `connection()` accessed outside of `<Suspense>` prevents the route from being prerendered, blocking the page load and leading to a slower user experience.

Ways to fix this:
  - [stream] Provide a placeholder with `<Suspense fallback={...}>` around the data access
  - [cache] For uncached data (`fetch`, database calls): cache the access with `"use cache"` (does not apply to `connection()`)
  - [block] Set `export const instant = false` to allow a blocking route

最初はページの関数の中で await params していたため、このエラーでビルドが止まりました。params（Promise のまま）を Suspense の中の部品に渡し、そこで await する形に直すと、ルートは「◐」になりました。以前の版の記事の「ページを async にして params を await する」書き方は、Cache Components を有効にするとこのエラーになることがあります。

ビルド時に乱数を使った

Error: Route "/hydration": Next.js encountered the unstable value `Math.random()` in a Client Component.

This value would be evaluated during the prerender, instead of recomputed on each visit.

Ways to fix this:
  - [stream] Wrap the Client Component in `<Suspense fallback={...}>`
  - [defer] Move the read into a `useEffect` or event handler

Google Fonts に接続できない

create-next-app の雛形は next/font/google で Geist というフォントを読みます。外へのアクセスが制限された環境でビルドすると、次のエラーで止まりました。

Error: next/font: error:
Failed to fetch Geist from Google Fonts.
If you are offline or behind a proxy, self-host the font with next/font/local, or set HTTP_PROXY/HTTPS_PROXY so Next.js can reach fonts.googleapis.com.

社内のネットワークや CI で起きやすいエラーです。フォントのファイルをプロジェクトに置いて next/font/local で読むか、Google Fonts を使わない形にします。手元のデモは、layout.tsx から next/font/google を外して進めました。

よくある質問

Q. Next.jsとは何ですか？ A. React を土台にした Web アプリのフレームワークです。ページのルーティング、サーバーでの描画、データ取得、API、本番用のビルドを一式で持っています。Vercel 社が開発し、MIT ライセンスで公開されています。

Q. React と Next.js の違いは何ですか？ A. React は画面の部品を作るライブラリで、Next.js はその部品を使ってアプリ全体を組み立てる骨組みです。手元の比較では、JavaScript を切ったときに Next.js の Server Component のページは中身が表示され、ブラウザだけでデータを読むページは何も表示されませんでした。

Q. Next.js を学ぶ前に React は必要ですか？ A. 必要です。画面の部品は JSX・props・useState など React の書き方で書きます。Next.js の公式も、React に慣れていない人向けに「React Foundations」の講座を案内しています。

Q. Next.js は無料ですか？Vercel を使う必要はありますか？ A. Next.js 自体は MIT ライセンスで無料です。Vercel は Next.js を開発している会社のホスティングで、使わなくても Node.js のサーバー・Docker・静的書き出しで公開できます（公式ドキュメント）。

Q. TypeScript は必須ですか？ A. 必須ではありません。--js を付けると JavaScript のプロジェクトを作れます。create-next-app の既定は TypeScript で、ルートから自動で作られる型（PageProps など）の恩恵も受けられるため、新しく始めるなら TypeScript が扱いやすいです。

Q. App Router と Pages Router はどちらで始めればよいですか？ A. 新しく作るなら App Router です。create-next-app の推奨設定でもあります。Pages Router は以前からのアプリの保守で使われており、今もサポートされています。

Q. Next.js と Nuxt、NestJS の違いは？ A. Nuxt は Vue を土台にしたフレームワークで、Next.js は React を土台にしています。NestJS は Node.js でサーバー（API）を作るためのフレームワークで、画面を描画する Next.js とは役割が違います。名前は似ていますが、別のプロジェクトです。

Q. Next.js は SEO に強いのですか？ A. サーバーで中身入りの HTML を返すため、クローラーが中身を読みやすくなります。手元でも Server Component のページは JavaScript なしで中身が表示されました。ただし、ブラウザだけでデータを読む作りにすると、その部分は最初の HTML に入りません。

Q. Next.js の最新版とサポート期間は？ A. 2026年10月29日時点の最新の安定版は 16.4.3 です。公式のサポート方針では 16.x が Active LTS、15.x が Maintenance LTS で、15.x のセキュリティ修正は 2027年1月31日までと案内されています。

Q. テレメトリー（利用データの送信）を止めるには？ A. 環境変数 NEXT_TELEMETRY_DISABLED=1 を設定するか、プロジェクトで npx next telemetry disable を実行します。状態は npx next telemetry status で確かめられます。公式の説明では、送られるのはコマンド名・版・マシンの概要・ビルド時間などで、環境変数やファイルの中身は送らないとされています。

Q. 開発中は動くのに、npm run build で失敗します。 A. ビルドでは各ページを事前に描画するため、そこで初めて出るエラーがあります。手元でも、Suspense の外で params を読む・Client Component で乱数を使う・Server から関数を渡す、の3つはビルドで止まりました。エラーの「Ways to fix this」に直し方が書かれています。

まとめ

• Next.js は、React にルーティング・サーバーでの描画・データ取得・API・ビルドを足したフレームワーク。2026年10月29日時点の最新は 16.4.3 で、16.x が Active LTS。
• React だけの SPA との一番の違いは、最初の HTML に中身が入っていること。JavaScript を切っても、Server Component のページは中身が表示された。
• 始め方は npx create-next-app@latest → npm run dev。16.4 の推奨設定は TypeScript・Tailwind CSS・ESLint・App Router・Cache Components・AGENTS.md。テレメトリーを止めるなら最初に NEXT_TELEMETRY_DISABLED=1。
• 部品は既定で Server Component。useState・onClick・window を使う部品だけ "use client"。"use cache" の一覧は約2ms で API に届かず、毎回読む詳細は約320ms で、外枠は 12ms で先に届いた。
• 公開先は Node.js・Docker（すべての機能）、静的書き出し（一部）、アダプター（Vercel・Bun が検証済み）。SEO とサーバー処理が要るなら Next.js、ログイン後だけの画面なら Vite＋React、ブログなら Astro も候補。

次に読むとよい記事です。App Router の各機能を順に深く追うなら関連記事「Next.js App Router 入門｜v16対応・実際のビルド結果つき」、フォームを作るなら関連記事「Next.js Server Actionsの使い方｜CRUDテンプレートと安全対策」が続きです。

参考・出典

確認日はいずれも 2026年10月29日です。

• Next.js「Installation」：https://nextjs.org/docs/app/getting-started/installation
• Next.js「Deploying」：https://nextjs.org/docs/app/getting-started/deploying
• Next.js「Caching」（Cache Components）：https://nextjs.org/docs/app/getting-started/caching
• Next.js「Server and Client Components」：https://nextjs.org/docs/app/getting-started/server-and-client-components
• Next.js「create-next-app」：https://nextjs.org/docs/app/api-reference/cli/create-next-app
• Next.js「Support Policy」：https://nextjs.org/support-policy
• Next.js「Telemetry」：https://nextjs.org/telemetry
• Next.js「Showcase」：https://nextjs.org/showcase
• Next.js のパッケージに同梱のドキュメント（16.4.3）：node_modules/next/dist/docs/
• npm「next」：https://www.npmjs.com/package/next
• React「Creating a React App」：https://react.dev/learn/creating-a-react-app
• React Router「Picking a Mode」：https://reactrouter.com/start/modes
• Remix「Merging Remix and React Router」：https://remix.run/blog/merging-remix-and-react-router
• Astro「Islands architecture」：https://docs.astro.build/en/concepts/islands/

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。