コースの最後はNext.jsです。ここまでで作ったのは「ブラウザの中だけで動くReactアプリ」でした。実務では、そこにサーバー側が加わることが多くあります。
ReactとNext.jsの関係
- React——UIを作るライブラリ。画面の組み立て方だけを提供する
- Next.js——Reactを使ってサイトやアプリを組み立てるフレームワーク
Next.jsには、Reactに無いものが最初から入っています。
| Next.jsが持っているもの | このコースではどうしていたか |
|---|---|
| ルーティング | React Routerを自分で入れた |
| サーバー側での描画 | 無し（ブラウザで組み立てていた） |
| データ取得の仕組み | useEffect／TanStack Queryを自分で入れた |
| 画像・フォントの最適化 | 無し |
| APIを書く場所 | 無し（別サーバーが必要） |
「Reactの上に、足りないものを載せた箱」——これがフレームワークです。
いちばん大きい変化：どこで動くか
Next.jsのApp Routerでは、コンポーネントは既定でサーバー側で動きます（サーバーコンポーネント）。
// これはサーバーで動く。ブラウザにJavaScriptは送られない
export default async function BirdsPage() {
const birds: Bird[] = await getBirds() // データ取得を直接書ける
return (
<ul>
{birds.map((bird) => <li key={bird.id}>{bird.name}</li>)}
</ul>
)
}useEffectもuseStateもuseQueryも出てきません。サーバーで取ってきて、そのままHTMLにするからです。
ブラウザ側の機能（state・イベント・useEffect）が必要な部品だけ、印を付けて分けます。
'use client' // ← この1行で、ここから下はブラウザで動く
import { useState } from 'react'
export function FavoriteButton() {
const [liked, setLiked] = useState(false)
…
}ルーティングはフォルダで決まる
React Routerでは対応表を書きましたが、Next.jsはフォルダの構造がそのままURLになります。
app/
├── page.tsx → /
├── birds/
│ ├── page.tsx → /birds
│ └── [id]/
│ └── page.tsx → /birds/1
└── not-found.tsx → 404[id]がuseParamsにあたる部分です。<Routes>を書かなくていい代わりに、フォルダの置き方を覚えることになります。
いつ移るか、いつ移らないか
これが実務での判断です。
| 状況 | 判断 |
|---|---|
| 検索エンジンに読ませたい（メディア・EC・LP） | Next.js。ブラウザで組み立てるReactは不利 |
| サーバー側の処理が要る（APIキーを隠す、DBを触る） | Next.js |
| 表示速度が事業に直結する | Next.js |
| ログインの内側だけのアプリ（管理画面・社内ツール） | ViteとReactで十分 |
| 個人の小さなアプリ・練習 | ViteとReactで十分 |
| すでにあるサイトに一部だけ足す | React |
移るときの学習順
移ると決めたら、この順で学ぶのが効率的です。
- App Routerのフォルダ構成——
page/layout/loading/error - サーバーとクライアントの境界——
'use client'をどこに置くか - データ取得——サーバーコンポーネントで
awaitする形 - キャッシュ——ここがNext.jsでいちばん難しく、バージョンで変わりやすい
- デプロイ——Vercelが最短。他社でも動くが制約を確認する
公式ドキュメントも見てみる
ja.react.dev外部サイトReact アプリの作成 – ReactReact公式の「Reactアプリの作成」。フレームワークを勧める理由と選択肢がまとまっています
nextjs.org外部サイトGetting Started: Server and Client Components | Next.jsNext.js公式の「Server and Client Components」。境界の考え方は、ここを読むのがいちばん確実です（英語）このレッスンのまとめ
- ReactはUIのライブラリ、Next.jsはアプリを組み立てるフレームワーク
- Next.jsが持っているのはルーティング・サーバー描画・データ取得・最適化・API
- App Routerでは既定でサーバー側。ブラウザ機能が要る部品に
'use client'を付ける 'use client'の中身は、このコースでやってきたことそのもの- サーバーコンポーネントではstate・イベント・
windowが使えない - ルーティングはフォルダ構造がURLになる
- 検索エンジン・サーバー処理が要るなら移る。ログインの内側だけなら移らなくていい
長い道のりでした。次でいよいよ最終回、ビルドして公開します。