Next.jsとは何か

1. Webサイトが表示されるまで

Next.jsの話に入る前に、Webサイトがどうやって画面に表示されるのかを確認しておきます。ここが分かると、この先の章がぐっと読みやすくなります。

登場人物は2つです。あなたが操作しているブラウザ（Chrome、Safari、Edgeなど）と、サイトのデータを持っている遠くのコンピューター、サーバーです。

サーバーから返ってくるファイルは、主に次の3種類です。

2. React：画面を「部品」で作る道具

昔のWebサイトは、ページごとにHTMLを1枚ずつ手作りしていました。しかし、ネットショップや業務システムのように画面が多く、動きも複雑になると、手作りでは管理しきれません。

そこで生まれたのがReact（リアクト）です。Meta社（旧Facebook）が開発した、画面を部品の組み合わせで作るための道具（ライブラリ）で、いまWeb開発で最も広く使われています。

「ヘッダー」「商品カード」「購入ボタン」のような部品を一度作れば、あとはいくつものページで使い回せます。部品の考え方は第3章で詳しく扱います。

ただし、Reactが担当するのは画面の部品づくりだけです。実際のサイトに必要な次のようなことは、Reactだけでは用意されていません。

• URLごとにどのページを表示するか（ページの道案内）
• サーバー側でデータベースからデータを取り出す処理
• 表示を速くするための工夫や、検索エンジン対策
• 公開用にファイルをまとめる作業

3. Next.js：Reactに「家一軒分の設備」を足したもの

Next.js（ネクスト・ジェイエス）は、Reactを土台にして、上で挙げた足りない部分を最初からひとまとめにしたフレームワークです。開発しているのは、アメリカのVercel（バーセル）社です。オープンソース（設計図が公開されていて誰でも無料で使えるソフト）として提供されています。

ライブラリとフレームワークの違い

この2つの言葉はよく出てくるので、違いを押さえておきましょう。

ライブラリ（例：React）

必要なときに呼び出して使う「道具箱」。全体の進め方は作る人が決めます。

フレームワーク（例：Next.js）

全体の「型」や「決まりごと」があらかじめ用意されていて、その型に沿って中身を埋めていきます。自由度は少し下がりますが、迷わずに済みます。

Next.jsが用意しているもの

4. なぜNext.jsがこれほど選ばれているのか

Next.jsは、個人のブログから大企業のサービスまで幅広く使われています。理由は主に4つです。

1. 表側も裏側も1つで作れる：画面（表側）と、データ処理などのサーバー側（裏側）を、同じ仕組みの中で作れます。小さなチームでも一通りのサービスが作れます。
2. 速くて検索に強い：サーバー側でページを作ってから送るため、表示が速く、Googleなどの検索エンジンにも内容が伝わりやすくなります。
3. 情報が多い：利用者が多いため、困ったときの解説記事や事例が豊富です。AIも学習している情報が多く、AIにコードを書かせたときの精度が高いのも、今では大きな利点です。
4. 公開が簡単：開発元のVercel社のサービスを使えば、数クリックでインターネットに公開できます（第7章）。

5. バージョンと「2つの作り方」

Next.jsは毎年のように大きく更新されています。2026年秋の時点ではバージョン16系が最新です。更新は速いので、AIや解説記事を見るときは「いつの情報か」を気にする習慣をつけましょう。

特に知っておきたいのが、ページの作り方に2つの方式があることです。

インターネット上には古いPages Routerの解説も多く残っており、AIがその書き方を混ぜてくることもあります。見分け方は第8章で紹介します。