こんにちは、かつコーチです。
これまでJavaScriptの基礎からTypeScript、React、Vue.jsまで、たくさんの記事を書いてきました。
いよいよ今回から新しいシリーズとして、Next.jsというフレームワークを解説していきます。
「Reactは勉強したけど、Next.jsって結局何が違うの？」という疑問を持つ人はとても多いです。
この記事では、Next.jsの正体と、Reactとの関係をゼロから整理していきます。
Next.jsとは？
ReactをベースにしたWebフレームワーク
Next.jsとは、Reactというライブラリの上に作られたフレームワークです。
フレームワークとは、アプリを作るうえで必要な機能や決まりごとを、あらかじめまとめて用意してくれる仕組みのことです。
Reactはあくまで「画面のパーツ（コンポーネント）を作るためのライブラリ」であり、それ単体ではページ間の移動やサーバー側の処理までは面倒を見てくれません。
Next.jsは、Reactだけでは物足りない部分を補ってくれる存在だとイメージしてください。
ReactとNext.jsの関係
ここが今回いちばん伝えたいポイントです。
ReactとNext.jsは、対立する技術ではありません。
Next.jsの中身は、Reactのコンポーネントの仕組みをそのまま使っています。
つまり、これまでReactシリーズで学んだ「コンポーネント」「Props」「useState」といった知識は、Next.jsでもそのまま活きます。
そのうえでNext.jsは、以下のような「Reactだけでは自分で組み立てる必要があった機能」を標準で提供してくれます。
- ルーティング：URLごとに表示するページを切り替える仕組み
- SSR（サーバーサイドレンダリング）：サーバー側であらかじめHTMLを作ってから返す仕組み
- SSG（静的サイト生成）：ビルド時にページのHTMLを事前に作っておく仕組み
- 画像最適化やフォント最適化などのパフォーマンス機能
言い換えると、Next.js = React + ルーティング + SSR/SSGなどの実務機能、という足し算のイメージです。
なぜNext.jsが必要とされるのか
素のReactだけで開発する場合の課題
Reactシリーズで作ったアプリは、create-viteのようなツールで作った、いわゆるSPA（シングルページアプリケーション）でした。
SPAは、最初に1枚の空っぽに近いHTMLを読み込んでから、JavaScriptで画面の中身を組み立てていく方式です。
この方式には、次のような課題があります。
- 検索エンジンのクローラーが、JavaScript実行前の空っぽなHTMLしか読めず、SEOで不利になりやすい
- 初回表示までに、JavaScriptの読み込み・実行を待つ必要があり、表示が遅く感じられやすい
- ページごとのルーティング（URL管理）を自分でライブラリを組み合わせて実装する必要がある
Next.jsが解決してくれること
Next.jsを使うと、サーバー側であらかじめHTMLを組み立てて返すSSRや、ビルド時にHTMLを作っておくSSGが標準で使えます。
そのため、ユーザーがページを開いた瞬間には、すでに中身の入ったHTMLが届くようになります。
検索エンジンにも中身のあるHTMLを見せられるので、SEOの面でも有利です。
ブログやコーポレートサイト、ECサイトのように「検索流入」や「初回表示の速さ」が重要なプロジェクトで、Next.jsがよく選ばれる理由はここにあります。
Next.jsでできることのイメージ
コンポーネントの書き方はReactとほぼ同じ
実際のコードを見てみましょう。
// app/page.tsx（Next.jsのトップページになるファイル）
export default function HomePage() {
const message: string = "Next.jsへようこそ";
return (
<main>
<h1>{message}</h1>
<p>ReactのコンポーネントがNext.jsでもそのまま使えます。</p>
</main>
);
}
見ての通り、JSXの書き方やexport default functionの形は、Reactシリーズで学んだものとほぼ同じです。
変わるのは、「このファイルをどこに置くか」で自動的にURLが決まる、ファイルベースルーティングという仕組みが加わる点です。
これについては次々回の記事で詳しく解説します。
私が最初につまずいた勘違い
ここで、私が実際につまずいた経験を1つ共有します。
Next.jsを触り始めたばかりの頃、「Next.jsを覚えれば、Reactの知識はもう不要になる」と勘違いしていた時期がありました。
そのせいで、Reactの基礎（Props・state・イベントハンドリングなど）を復習せずにNext.jsの学習を始めてしまい、公式ドキュメントのサンプルコードで何が起きているのか理解できず、何度も手が止まりました。
❌ Before：Reactの基礎を飛ばしてNext.jsだけ学ぼうとする
// stateの意味が分からず、なんとなくコピペしていた状態
"use client";
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState<number>(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
✅ After：Reactのusestateの仕組みを理解したうえでNext.jsに臨む
Reactシリーズの「useStateの基礎」の記事に戻って、useStateが「値の変化を検知して再レンダリングを起こす仕組み」だと理解し直してから、改めてこのコードを読むと、すんなり腑に落ちました。
Next.jsは「Reactの土台の上に立つ応用編」なので、Reactの基礎が曖昧なまま進むと、遠回りになりやすいというのが私の実感です。
まとめ
この記事のポイント
- Next.jsは、Reactの上に作られたフレームワークであり、Reactの知識はそのまま活きる
- Next.js = React + ルーティング + SSR/SSGなどの実務機能、という足し算でイメージするとわかりやすい
- 素のReact（SPA）はSEOや初回表示の速さで課題があり、Next.jsのSSR/SSGがそれを補ってくれる
- Next.jsを学ぶ前に、Reactの基礎（コンポーネント・Props・state）を理解しておくと学習がスムーズになる
次に読むべき記事
Next.jsの立ち位置が分かったところで、次回は実際に手を動かして、Next.jsのプロジェクトを作る環境構築を解説します。
→ 次の記事：create-next-appで環境構築する手順
