Next.js（ネクスト・ジェイエス）

Next.js（ネクスト・ジェイエス）とは、Reactをベースに、Webアプリケーション開発で必要になる機能をあらかじめ組み込んだフレームワークです。React単体では自分で用意する必要があった画面の描画方式やページの振り分けなどを、標準機能として備えています。

現実世界に例えると、Next.jsは「基礎工事や配管まで済んだ状態の建築キット」のようなものです。React という優れた建材があっても、土台や設備を一から整えるのは手間がかかります。Next.jsはその下準備を代わりに済ませてくれるため、開発者は建物の中身づくりに集中できます。

Reactとの関係

Next.jsはReactを置き換えるものではなく、Reactを使いやすくするために上に重ねて使う仕組みです。画面を部品（コンポーネント）に分けて組み立てるという考え方はReactそのままで、そこに開発に便利な機能が追加されている、という関係になります。

主な特徴

SPAの課題を補う仕組み

React単体で作るSPAは、画面の中身がJavaScriptで後から生成されるため、初回表示が遅くなりやすく、検索エンジンに内容を認識してもらいにくいという課題がありました。Next.jsは、あらかじめサーバー側でHTMLを組み立てて返す仕組みを備えることで、この課題に対応しています。

描画方式の選択

Next.jsでは、ページごとに「サーバー側で毎回描画する方式」「あらかじめHTMLを作っておく方式」「ブラウザ側で描画する方式」を使い分けられます。更新頻度の低い記事ページは事前生成、ログイン後の管理画面はブラウザ側で描画、といった柔軟な設計が可能になります。

名前の由来と開発元

Next.jsは、Vercel（旧Zeit）というアメリカの企業によって開発・提供されているオープンソースのフレームワークです。「Next（次）」という名前には、Webアプリケーション開発の次の標準を目指すという意味合いが込められています。開発元がホスティングサービスも提供しているため、作ったアプリをそのまま公開しやすい点も特徴です。

主な用途

Next.jsは、企業のコーポレートサイトやメディアサイト、ECサイトなど、表示速度と検索エンジン対策の両方が求められるWebサイトで広く採用されています。近年ではReactを使った開発の標準的な選択肢のひとつとして定着しています。

あわせて知っておきたい用語

• React：
  Next.jsの土台となっている、代表的なJavaScriptライブラリです。
• SPA（Single Page Application）：
  1つのページ内で画面を書き換えるWebアプリケーションの形式です。
• SSR（サーバーサイドレンダリング）：
  サーバー側でHTMLを組み立てて返す描画方式です。
• SEO：
  検索エンジンに正しく評価されるよう、サイトを最適化する取り組みです。