Next.jsとは？Reactとの違い・インストール・App Router・Server Components・レンダリング方式を初心者向けに完全解説【2026年版】

2026年5月10日2026年6月9日

Next.js（ネクスト・ジェーエス）は、ReactをベースにしたオープンソースのWebフレームワークで、Vercel社（旧Zeit社）が開発・メンテナンスしている。Reactが「UIを構築するためのライブラリ」なのに対し、Next.jsは「Reactで本格的なWebアプリを作るために必要な機能を全部まとめたフレームワーク」だ。一言で言えば、「Reactに足りないものを全部追加した完成パッケージ」がNext.jsだ。ファイルベースのルーティング・サーバーサイドレンダリング・APIルート・画像最適化・フォント最適化など、Webアプリに必要な機能が最初から組み込まれている。

1. Next.jsとは——Vercel社製のReactフレームワーク

Next.jsはVercel社が開発するオープンソース（MITライセンス）のReactフレームワークだ。Netflix・TikTok・Twitch・GitHub Copilotのランディングページ・Airbnbなど、世界有数のサービスが採用している。2016年の初リリース以来バージョンアップを重ね、2026年現在はNext.js 15系が最新だ。

この記事でわかることを整理しておく。Next.jsを開発しているのはVercel社で、同社はデプロイプラットフォームも提供しているためNext.jsとの相性が最も良い。App Router時代に必須のServer ComponentsとClient Componentsの違い、”use client”の意味、APIルート（Route Handlers）でNode.jsサーバーなしにバックエンドAPIを作る方法、フォント最適化（next/font）でCLSなしにGoogleフォントを読み込む方法、SEO対応のmetadataオブジェクトでheadタグを管理する方法、Next.jsのデメリット（学習コスト・Vercel依存・ビルド時間）、そして「React単体で十分」な場合と「Next.jsが必要」な場合の判断基準——これらをすべて解説する。

2. ReactとNext.jsの違い——根本から理解する

ReactとNext.jsの関係は「ライブラリ」と「フレームワーク」という根本的な違いがある。Reactは「道具」、Next.jsは「道具が全部揃ったツールボックス」だ。

Reactは「UIを構築するためのライブラリ」で、Meta（旧Facebook）が開発している。ルーティングは自分でReact Router等をインストールして設定する必要があり、サーバー機能は別途Node.js等を用意して接続する必要がある。ビルドツールの設定（Vite・Webpack等）も必要で、既存アプリへの部分的な導入やReact Native（モバイルアプリ）開発に向いている。

Next.jsは「Reactを含んだフルスタックフレームワーク」でVercel社が開発している。ファイルを置くだけで自動ルーティング、サーバー機能を内蔵（APIルート・SSR等）、ゼロコンフィグで即開発開始、画像・フォント・SEOの最適化が標準搭載、フロントのみならずAPIサーバーも担える。新規プロジェクト・本格的なWebアプリに向いている。

重要：ReactとNext.jsは競合ではなく「親子関係」。Next.jsの中にReactが入っている。Next.jsを使えばReactも使える。「どちらを学ぶか」ではなく「どちらから始めるか」の話だ。Reactの基礎を学んでからNext.jsに進む順序が最も理解しやすい。

比較項目	React（単体）	Next.js
位置づけ	UIを構築するライブラリ	Reactをベースにしたフレームワーク
開発元	Meta（旧Facebook）	Vercel社
URLルーティング	React Router等を自分でインストール・設定	ファイルを配置するだけで自動生成
サーバー機能	Node.js等を別途用意して接続	APIルート（Route Handlers）を内蔵
レンダリング方式	基本はCSRのみ	CSR・SSR・SSG・ISRを使い分け可能
環境構築	Vite・Webpackのビルドツール設定が必要	create-next-appで即座に開始
SEO	CSRのためSEOに不利	SSR/SSGによりSEOに有利
画像最適化	自前で対応（sharp等が必要）	next/imageコンポーネントで自動最適化
フォント	別途読み込みコードが必要	next/fontで最適化した読み込みが内蔵

3. 4つのレンダリング方式——CSR・SSR・SSG・ISRの使い分け

Next.jsが「高速で・SEOに強い」と言われる理由が、この4つのレンダリング方式にある。ページの特性に応じて最適な方式を選ぶことで、速度とSEOを両立できる。

CSR（Client Side Rendering）

ブラウザ側でJavaScriptを実行してHTMLを生成する方式だ。最初は「空のHTML」が届き、JSが実行されて初めて表示される。SEOに弱く、ログイン後のダッシュボードや管理画面など「検索エンジンにインデックスされなくていい」ページに向いている。

SSR（Server Side Rendering）

リクエストのたびにサーバーで完成HTMLを生成してから送る方式だ。ユーザーごとに違うコンテンツに対応できる。SEOに強く、ユーザー別コンテンツやリアルタイム在庫情報などに向いている。

SSG（Static Site Generation）

ビルド時にHTMLを事前生成して静的配信する方式だ。最も高速でSEOにも最も強い。更新頻度の低いブログ記事・ドキュメント・静的LPに最適だ。

ISR（Incremental Static Regeneration）

SSGをベースに一定時間後だけ再生成するNext.js独自の機能だ。更新頻度が中程度のECサイトの商品ページやニュース記事に向いている。「静的配信の速さ」と「一定の鮮度」を両立できる。

方式	HTMLはいつ生成される	SEO	表示速度	向いているページ例
CSR	ブラウザ上でJS実行後	弱い	初期表示は遅い	ログイン後のダッシュボード・管理画面
SSR	リクエスト毎にサーバーで生成	強い	中程度	ユーザー別コンテンツ・リアルタイム在庫情報
SSG	ビルド時に一度だけ生成	最も強い	最速	ブログ記事・ドキュメント・静的LP
ISR	ビルド時＋一定間隔で再生成	強い	速い	ECサイトの商品ページ・ニュース記事

Reactの通常の動作（CSR）では、サーバーから届くHTMLは「ほぼ空っぽ」だ。ブラウザが空っぽのHTMLを受け取り、JavaScriptを読み込み、実行して初めてコンテンツが表示される。検索エンジンのクローラーが訪れたとき、空のページしか見えないためSEOに不利になる。一方のNext.jsは「プリレンダリング」——サーバー側であらかじめ完成したHTMLを作ってから送る。ブラウザは受け取ったHTMLをそのまま表示するだけなので表示が速く、クローラーも内容を正しく読み取れる。

4. Next.jsの主な特徴・機能

ファイルベースルーティング

決まったフォルダにファイルを置くだけでURLが自動生成される。app/blog/page.tsxを作ると/blogのURLでアクセス可能になる。URLごとにrouterの設定コードを書く必要がなく、直感的にページを追加できる。

画像最適化（next/image）

next/imageコンポーネントを使うだけで、表示サイズに合わせたリサイズ・WebP変換・遅延読み込み（Lazy Loading）・CLS（累積レイアウトシフト）の防止が自動で適用される。手動でsharpなどを設定する必要がない。

フォント最適化（next/font）

next/fontを使うとGoogleフォントを最適化してゼロCLSで読み込める。外部のGoogleサーバーへのリクエストが発生せず、フォントファイルがビルド時にバンドルされるためプライバシーとパフォーマンスが向上する。

APIルート（Route Handlers）——フルスタック開発が可能

app/api/フォルダにroute.tsを置くだけで、Next.jsがAPIサーバーとしても機能する。別途Node.jsサーバーやExpress.jsを立てる必要がなく、フロントとバックエンドを同一プロジェクトで管理できる「フルスタック」開発が可能だ。

メタデータAPI（SEO対応）

page.tsxにmetadataオブジェクトをexportするだけで、titleタグ・descriptionタグ・OGPタグが自動的に設定される。コンポーネント内でheadタグを管理する必要がなく、ページごとのSEO設定が統一された方法で書ける。

Turbopack（高速ビルドツール）

Next.js 13以降はRustで書かれた高速ビルドツール「Turbopack」が同梱されている（2026年現在はstableとして利用可能）。従来のWebpackと比較して開発サーバーの起動・HMR（ホットリロード）が大幅に高速化される。

5. App RouterとPages Router——どちらを使うか

Next.js 13.4（2023年5月）からApp Routerがデフォルトになった。それ以前のPages Routerも引き続き使えるが、新しいプロジェクトではApp Routerを使うのが推奨されている。

古い記事に注意：2022年以前の記事にはPages Routerを前提にした内容が多い。getStaticProps・getServerSidePropsなどのAPI、pagesディレクトリの構成が書かれている場合はPages Router前提の記事だ。現在の学習はApp Routerを前提に進めることを推奨する。

比較項目	App Router（推奨・現在のデフォルト）	Pages Router（旧方式・互換性維持）
ルートファイル	app/ディレクトリ内のpage.tsx	pages/ディレクトリ内のファイル名
Server Components	標準対応（デフォルトでサーバー側で動く）	非対応
データ取得	fetch()をコンポーネント内で直接使える	getStaticProps・getServerSidePropsを使う
レイアウト	layout.tsxで階層的なレイアウトを定義	_app.tsxと_document.tsxで管理
Loading UI	loading.tsxを置くだけで自動適用	自前で実装が必要
Error UI	error.tsxを置くだけで自動適用	ErrorBoundaryを自前で実装
学習コスト	やや高い（新概念が多い）	やや低い（参考記事が多い）
推奨度	新規プロジェクトに推奨	既存プロジェクトの移行・維持に使用

6. Server ComponentsとClient Components

App Routerで最も重要な新概念が「Server Components」と「Client Components」の区別だ。これを理解しないと”use client”のエラーで詰まりやすい。

Server Component（デフォルト）はサーバー側のみで実行される。データベースへの直接アクセス・非公開APIの呼び出し・重い処理をサーバーで完結させることができ、バンドルサイズを減らせる。useState・useEffect等のReact Hooks、ブラウザのイベント（onClick等）、ブラウザのAPI（localStorage等）は使えない。通常のコンポーネントとして書けばよく、特別な記述は不要だ。

Client Componentはブラウザ側でも実行される。useState・useEffect・インタラクション・ブラウザのAPIが使える。ファイルの先頭に"use client"を追加することで有効になる。

// Server Component（デフォルト）——サーバー側で動く
async function ProductPage() {
  const data = await fetch('https://api.example.com/products')
  const products = await data.json()
  return (
    <div>{products.map(p => <p key={p.id}>{p.name}</p>)}</div>
  )
}

"use client"  // この1行でClient Componentになる
import { useState } from 'react'
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}

原則として「できるだけServer Componentを使い、インタラクションが必要な部分だけClient Componentにする」というのがApp Routerのベストプラクティスだ。”use client”を多用するとサーバーのメリットがなくなるため注意が必要だ。

7. Next.jsを使うべき場面・使わない場面

状況	推奨	理由
新規でWebサイト・Webアプリを作る	Next.js	ルーティング・SEO・最適化が最初から揃っている。ゼロから環境を組む手間がない
SEOが重要なサービス（ECサイト・ブログ・コーポレートサイト）	Next.js	SSR/SSGによりクローラーが完全なHTMLを読み取れる。CoreWebVitals対応も容易
フロントとAPIを同じプロジェクトで管理したい	Next.js	APIルートでサーバーレス関数を書けば、別途Node.jsサーバーが不要
すでにReactで動いている既存アプリに機能を追加	React単体のまま	Reactで動いているものを無理にNext.jsに移行するとコストが大きい
Railsや Django等に部分的にUIを組み込む	React単体	Next.jsはスタンドアローンなフレームワークのため既存サーバーと組み合わせにくい
モバイルアプリを作りたい	React Native	Next.jsはWeb専用。モバイルアプリにはReact Nativeを使う

8. メリット・デメリット

Next.jsのメリット

ゼロコンフィグで即座に開発を始められる
SEOに必要なSSR/SSGが標準搭載
ファイルを置くだけのルーティングが直感的
画像・フォント・スクリプトの最適化が自動
APIルートでフルスタック開発が可能
TypeScript・Tailwind CSSとの相性が抜群
Vercelへのデプロイが非常に簡単（GitHubにプッシュするだけ）
世界最大級のフロントエンド企業（Netflix・TikTok・Twitch等）の採用実績

Next.jsのデメリット・注意点

App RouterのServer Components概念の学習コストが高い
Vercel社製のため、Vercelへの依存リスクがある
大規模プロジェクトではビルド時間が長くなりやすい
古い記事・チュートリアルが多くバージョン差異でつまずきやすい
Pages RouterとApp Routerの並存で設計が複雑になる場合がある
“use client”の付け忘れや不適切な使用でバグが起きやすい

9. インストール・プロジェクト作成

前提条件：Node.js v18以上が必要。node -vでバージョンを確認し、v18未満の場合はnodejs.orgから最新版をインストールする。

Step1：create-next-appでプロジェクトを作成する

ターミナルで以下のコマンドを実行する。プロジェクト名・TypeScript・ESLint・Tailwind CSS・App Routerなどを対話形式で選択できる。

# プロジェクト作成コマンド
npx create-next-app@latest
# TypeScript: Yes / ESLint: Yes / Tailwind CSS: Yes / App Router: Yes / Turbopack: Yes

Step2：開発サーバーを起動する

cd my-app
npm run dev
# http://localhost:3000 にアクセス

生成されるディレクトリ構造（App Router）

my-app/
├── app/
│   ├── layout.tsx       # 全ページ共通レイアウト
│   ├── page.tsx         # トップページ（/）
│   └── globals.css
├── public/              # 静的ファイル
├── next.config.ts
└── package.json

10. 基本的なページ作成とルーティング

// app/about/page.tsx → /about でアクセス可能になる
export default function AboutPage() {
  return <main><h1>About</h1></main>
}
export const metadata = { title: 'About — サイト名', description: '説明文' }

// 動的ルーティング: app/blog/[slug]/page.tsx → /blog/任意のパス
export default function BlogPost({ params }: { params: { slug: string } }) {
  return <h1>{params.slug}</h1>
}

// APIルート: app/api/hello/route.ts → /api/hello
export async function GET() {
  return Response.json({ message: 'Hello!' })
}

11. 環境変数の扱い方

Next.jsではプレフィックスによって「サーバー専用」か「ブラウザでも使える」かが変わる。NEXT_PUBLIC_プレフィックスなしの環境変数はサーバー専用で、ブラウザからは参照できない。

# .env.local（Gitにコミットしないこと）
DATABASE_URL=postgresql://...       # サーバー専用
NEXT_PUBLIC_SITE_URL=https://...    # ブラウザでも使える（NEXT_PUBLIC_必須）

注意：NEXT_PUBLIC_なしの環境変数はブラウザで参照できない。クライアントコンポーネントで秘密情報を使おうとすると、ビルド時にundefinedになる。秘密情報はサーバーコンポーネントかAPIルートからのみアクセスすること。

12. デプロイ先の選択肢

デプロイ先	特徴	Next.jsとの相性	推奨シーン
Vercel（公式）	GitHubにプッシュするだけで自動デプロイ。全機能が最適に動く。無料プランあり	最高	個人・スタートアップ・プロトタイプ
AWS Amplify / EC2	AWSのエコシステムと連携しやすい	良い	既存のAWS環境を使っている企業
Netlify	Vercelに似た使い心地	良い（ほぼ全機能対応）	Vercelの代替として
自前サーバー（VPS等）	Node.jsサーバーとして動かす。Vercel非依存	動くが設定が必要	自社インフラ管理
Docker + Kubernetes	コンテナ化してスケール	動く（設定コスト高め）	エンタープライズ

13. よくある質問——FAQ8問

Q：ReactとNext.jsはどちらを先に学ぶべきか？

Reactの基礎を学んでからNext.jsに進む順序が最も理解しやすい。Reactのコンポーネント・props・useState・useEffectを使えるようになってからNext.jsに進むと、「Next.jsがReactに何を追加しているか」が明確に理解できる。ただし、最初からNext.jsで学ぶアプローチも有効で、実際に動くものを作りながらReactの基礎を自然に吸収できる。

Q：App RouterとPages Routerはどちらを学ぶべきか？

新しく学ぶならApp Routerを推奨する。2023年5月のNext.js 13.4以降のデフォルトで、Vercelもこちらを推奨している。Server Components・Streaming・入れ子レイアウト等の新機能はApp Routerでのみ使える。既存プロジェクトがPages Routerで動いている場合は無理に移行する必要はない。チュートリアルを見るときは「どちらを使っているか」を確認すること。

Q：”use client”はどこに書けばいい？

ファイルの一番先頭（import文より前）に書く。useState・useEffect・onClickなどのブラウザ固有の機能を使うコンポーネントにのみ書く。全部のファイルに書いてしまうとServer Componentsの恩恵が得られなくなるため、必要最小限のコンポーネントにだけ使うのがベストプラクティスだ。

Q：Next.jsを使うとVercelに縛られる？

完全には縛られないが、一定の依存は生じる。Next.jsはVercel以外のAWS・Netlify・自前サーバー・Dockerでも動かせる。ただしVercel固有の機能を多用すると他プラットフォームへの移行コストが増える。標準的なWeb技術で実装することで長期的な柔軟性を確保できる。

Q：TypeScriptとJavaScript、どちらで書くべき？

2026年現在、TypeScriptを推奨する。create-next-appのデフォルト設定もTypeScriptが有効になっている。Next.jsの公式ドキュメントもTypeScriptを前提にしたサンプルが増えており、多くのライブラリがTypeScriptの型定義を提供している。

Q：Next.jsのバージョンはどれを使えばよい？

2026年現在はNext.js 15系を使うのが推奨。create-next-app@latestを使えば自動的に最新バージョンが適用される。学習に使うチュートリアルや記事のバージョンを確認し、古いバージョンの記事（特にNext.js 12以前）は構成が大きく異なる点に注意。

Q：どんな企業・サービスがNext.jsを使っているか？

Netflix・TikTok・Twitch・GitHub Copilotのランディングページ・Airbnb等が採用している。日本国内でも多くの企業のコーポレートサイト・ECサイト・SaaSが採用している。GitHubのOSSトレンドでも常に上位に位置し、フロントエンド開発の定番フレームワークとして確立している。

Q：Nuxt.js（Vue版）との違いは？

役割は同じで「React用がNext.js・Vue用がNuxt.js」という関係だ。どちらも本格的なSSR/SSG対応フレームワークで、ファイルベースルーティング・ゼロコンフィグ等の機能が共通している。日本国内でのシェアはReact+Next.jsの方が高い。片方を学べばもう片方の学習コストは下がる。

LIF Techではこの領域の実務事例を今後も発信していきます。

本記事は2026年5月時点の情報をもとに作成しています。Next.jsのバージョン・APIはVercelの判断により変更される場合があります。最新情報は必ず公式ドキュメント（nextjs.org/docs）でご確認ください。コードサンプルはNext.js 15・App Routerを前提にしています。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！