【2026年版】Next.jsの始め方 — Reactフレームワークの第一歩を完全ガイド
- Next.jsプロジェクトの作成（App Router）
- サーバーコンポーネントとクライアントコンポーネントの違い
- ページルーティングの基本
- データフェッチングとSSR/SSG/ISRの概念
セットアップ手順
# Next.jsプロジェクト作成（App Router + TypeScript推奨）
npx create-next-app@latest my-next-app --typescript --tailwind --eslint --app
cd my-next-app
npm run devApp Routerの基本構造
my-next-app/
├── app/
│ ├── layout.tsx # 共通レイアウト
│ ├── page.tsx # ルートページ（/）
│ ├── about/
│ │ └── page.tsx # /about ページ
│ └── api/
│ └── hello/
│ └── route.ts # /api/hello エンドポイント
└── components/ # 再利用コンポーネント// app/page.tsx（サーバーコンポーネント・デフォルト）
async function HomePage() {
const data = await fetch('https://api.example.com/posts');
const posts = await data.json();
return <main>{posts.map(p => <p key={p.id}>{p.title}</p>)}</main>;
}
// クライアントコンポーネントは先頭に 'use client' を追加
'use client';
import { useState } from 'react';よくある詰まりポイント
Q: 'use client' をどこに付ければいい？
→ useState / useEffect などのReact Hooksを使うコンポーネントや、ブラウザのAPIを使う場合に付けます。サーバーで完結するデータ取得などは付けなくてOKです。
Q: App RouterとPages Routerどちらを使うべき？ → 新規プロジェクトではApp Router（Next.js 13以降）が推奨です。ただし学習資料が古いとPages Routerの例も多いので、両方の違いを把握しておくと混乱しにくいです。
Q: ローカルで画像が表示されるがデプロイ後に表示されない
→ next/image の remotePatterns 設定が必要な場合があります。next.config.js で許可するドメインを追加してください。
ペンギン先生 
ひよこ なるほど、準備の手間が全然違うんだね！実際に動かすまでどのくらいかかるの？
ペンギン先生 ペンギン先生 ひよこ App Routerってどういう仕組みなの？
ペンギン先生 ひよこ Server ComponentsとClient Componentsっていうのも聞いたけど、どう使い分けるの？
ペンギン先生 ペンギン先生 ひよこ API Routesっていうのもあるって聞いたよ！
ペンギン先生 ひよこ 作ったアプリはどうやって公開するの？
ペンギン先生 ひよこ もっと上級の機能も気になる！ISRとかミドルウェアって何？
ペンギン先生 ISR（Incremental Static Regeneration）は、一度静的生成したページをバックグラウンドで定期的に再生成する仕組みだよ。fetchのrevalidateオプションに秒数を指定するだけで使える。ミドルウェアはリクエストがページに届く前に処理を挟む機能で、認証チェックやリダイレクト、地域ごとの出し分けなんかに使うんだ。Edge Runtimeで動くからレスポンスがとても速いよ。
ひよこ React Server Actionsっていうのも最近よく聞くけど…？
ペンギン先生 ひよこ 便利すぎる…！これからNext.jsを学ぶならどんな順番がいいかな？