「Next.jsを勉強しようと思ったけど、Reactと何が違うの？」
この疑問を持ったあなたは、正しい入口に立っています。
Next.jsを理解するには、まずReactとの関係を整理することが近道です。
この記事では、概念の整理から実際に画面が表示されるまでを一緒に進めます。
Contents
ReactとNext.jsの関係
まず結論から言うと、Next.jsはReactをベースに作られたフレームワークです。
Reactは「UIを作るためのライブラリ」です。
ボタンやフォームなどの画面部品（コンポーネント）を作る仕組みは提供してくれますが、
- 「ページ間の移動をどうするか」
- 「データをどこで取得するか」
- 「本番用にどうビルドするか」
といった部分は自分で設計する必要があります。
Next.jsはその「自分でやらないといけない部分」をあらかじめ用意してくれたものです。
ルーティング、データ取得、最適化——これらがセットで付いてきます。
React
└── UIを作る仕組み（コンポーネント）
Next.js
├── React（UIの部分）
├── ルーティング（ページ遷移）
├── データ取得の仕組み
├── ビルド・最適化
└── サーバーサイド機能料理に例えると、Reactは「包丁と鍋」で、Next.jsは「包丁と鍋が揃ったキッチン＋レシピ集」のようなイメージです。
SPAとSSR——どうやって画面を表示するか
Next.jsを選ぶ理由を理解するために、Webページの表示方法の違いを押さえておきましょう。
SPA（シングルページアプリケーション）
従来のReact（Create React App など）は SPA という方式を取ります。
- ブラウザがサーバーに「ページください」とリクエストする
- サーバーはほぼ空のHTMLと
大量のJavaScriptを返す - ブラウザがJavaScriptを実行して、画面を組み立てる
つまり、画面を作る作業がすべてブラウザの中で行われます。
ブラウザ → サーバー：「HTMLください」
サーバー → ブラウザ：「空のHTML + JavaScript」
ブラウザ：JavaScriptを実行 → 画面を組み立てる ✅SSR（サーバーサイドレンダリング）
Next.jsが得意とする SSR は逆の発想です。
- ブラウザがサーバーに「ページください」とリクエストする
- サーバー側で画面を組み立てて、完成したHTMLを返す
- ブラウザはそのHTMLをそのまま表示する
ブラウザ → サーバー：「HTMLください」
サーバー：画面を組み立てる
サーバー → ブラウザ：「完成したHTML」
ブラウザ：そのまま表示 ✅どちらがいいの？
| SPA | SSR（Next.js） | |
|---|---|---|
| 初回表示速度 | 遅い（JSの実行待ち） | 速い |
| SEO | 弱い（クローラーが読めない場合がある） | 強い |
| インタラクション | 得意 | 組み合わせで対応 |
| サーバー負荷 | 低い | 状況による |
Next.jsはSSRだけでなく、ページごとに「静的生成（SSG）」や「クライアント側のレンダリング(CSR)」も選べます。
柔軟性が高いのも選ばれる理由のひとつです。
開発環境を整える
では実際に動かしてみましょう。必要なものは Node.js だけです。
Node.jsの確認
ターミナル（Macはターミナル、Windowsはコマンドプロンプト or PowerShell）を開いて、以下を実行してください。
node -vv18.0.0 以上のバージョンが表示されればOKです。
表示されない場合は nodejs.org からインストールしてください。
プロジェクトを作成する
デスクトップに練習として、開発用フォルダを作成し、そこをカレントディレクトリとして以下のコマンドを実行してください。
npx create-next-app@latest my-first-nextjsmy-first-nextjsの部分はプロジェクト名なので、自分のアプリ名に置き換えて自由に指定できます。
実行すると、いくつか質問されます。
初心者のうちは以下の設定がおすすめです。
✔ Would you like to use TypeScript? → Yes
✔ Would you like to use ESLint? → Yes
✔ Would you like to use Tailwind CSS? → Yes（後の記事で使います）
✔ Would you like to use `src/` directory? → No
✔ Would you like to use App Router? → Yes
✔ Would you like to customize the default import alias? → No今回はsrcディレクトリを使用せず、プロジェクトのフォルダ直下での説明を進めます。（デフォルト設定）
開発サーバーを起動する
cd my-first-nextjs
npm run devブラウザで http://localhost:3000 を開くと、Next.jsのウェルカムページが表示されます。🎉
プロジェクトの構造を眺めてみる
作成されたフォルダの中身を見てみましょう。
最初は全部理解しなくて大丈夫です。
my-first-nextjs/
├── app/ ← ページやレイアウトを置く場所（メイン）
│ ├── layout.tsx ← 全ページ共通のレイアウト
│ ├── page.tsx ← トップページ（localhost:3000）
│ └── globals.css ← グローバルなCSS
├── public/ ← 画像などの静的ファイル
├── next.config.ts ← Next.jsの設定ファイル
└── package.json ← 使っているパッケージの一覧注目してほしいのは app/ フォルダです。
Next.jsでは このフォルダの中にファイルを置くだけでページが作られます。
これを App Router と呼びます。詳しくは次の記事で扱います。
はじめてのページを触ってみる
app/page.tsx をエディタで開いて、中身をまるごと以下に書き換えてみてください。
export default function Home() {
return (
<main>
<h1>こんにちは、Next.js！</h1>
<p>はじめてのページです。</p>
</main>
);
}保存するとブラウザが自動で更新されて、書いた内容が表示されます。
これが Next.js の ホットリロード機能です。
ファイルを保存するたびに即座に反映されるので、開発がとても快適になります。
まとめ
この記事で学んだこと：
- Next.jsはReactをベースにしたフレームワーク。ルーティングやデータ取得などがセットで付いてくる
- SPAとSSRの違い。Next.jsはサーバーで画面を組み立てて返すSSRが得意
create-next-appで数分で開発環境が整うapp/フォルダがページを管理する中心地
次の記事では、ページとルーティングを掘り下げます。
「ファイルを置くだけでURLができる」App Routerの仕組みを手を動かしながら体験しましょう。
