Next.js

development web beginner

Reactをベースにした、Webアプリケーションを構築するためのフレームワーク。

概要（サマリー）

Next.jsは、Reactをベースにした、Webアプリケーションを効率よく構築するための多機能フレームワークである。

Reactが「画面の部品を作るための道具（ライブラリ）」であるのに対し、Next.jsは「Webサイトやアプリ全体を完成させるための土台（フレームワーク）」を提供する。ページの自動ルーティング機能、表示速度を高めやすいサーバー側での画面生成技術、画像やフォントの最適化など、モダンなWebサイト開発でよく必要になる機能が多く用意されている。

詳細解説

Next.jsとは何か（Reactを強力にするフレームワーク）

Next.jsは、Vercel社によって開発・メンテナンスされているWebフレームワークである。

React単体で本格的なWebアプリを作ろうとすると、URLのパス設定（ルーティング）、ページの読み込み速度対策、SEO（検索エンジン最適化）対策、本番サーバーの設定などを、開発者が自分で調べて組み合わせる必要があった。

Next.jsは、これらの面倒な「開発の準備段階」をすべて肩代わりし、開発者がすぐにアプリの機能作りに集中できるように作られている。

React単体とNext.jsの違い

初心者にとって最も理解しにくいのが「ReactとNext.jsの関係性」である。

この2つは競合する技術ではなく、「Next.jsという大きな家の中で、Reactという家具を使って画面を作っている」という関係である。

具体的な機能の違いは以下の通り。

ルーティング：React単体では外部ツールを導入してプログラムを書く必要があるが、Next.jsではファイルやフォルダを配置するだけで自動的にURLパス（例: /about）が作られる。
SEO対策：React単体のサイトは構成によっては、ブラウザでJavaScriptが動くまで内容が表示されにくく、検索エンジンに伝わる情報が不足することがある。Next.jsはサーバー側であらかじめHTMLを生成して返せるため、SEO対策をしやすい。
画像最適化：特別なタグ（<Image>）を使うだけで、表示デバイスのサイズに合わせた画像の自動圧縮や、スクロールに合わせた段階読み込みを自動で行ってくれる。

代表的なレンダリング手法（SSRとSSG）

Next.jsが強力とされる最大の理由が、サーバー側で画面のHTMLを生成する技術（レンダリング手法）を自由に選べる点にある。

SSR（サーバーサイドレンダリング）：ユーザーがページをリクエストした瞬間に、サーバー側で最新データを使って画面HTMLを生成して返す。常に最新情報（SNSのタイムラインや株価など）を表示したいページに使う。
SSG（スタティックサイトジェネレーション）：サイトを本番環境へアップロードする際（ビルド時）に、あらかじめすべてのページの静的なHTMLファイルを作っておく。表示が圧倒的に速く、ブログや会社紹介サイトなど、頻繁にデータが変わらないページに使う。

ルーティングの自動化（App Router）

現在のNext.jsでは、「App Router（アップルーター）」という最新のルーティングシステムが標準となっている。

これは、app フォルダの中に作成したフォルダの階層構造が、そのままWebサイトのURL構造になる仕組みである。

app/page.js → https://example.com/（トップページ）
app/about/page.js → https://example.com/about（アバウトページ）
app/blog/[id]/page.js → https://example.com/blog/123（個別記事ページ、動的なIDを受け取る）

このように、フォルダを作るだけで自動的にURLが繋がるため、直感的にサイト設計を進められる。

Next.jsの基本的な書き方（ページとデータ取得の例）

Next.js（App Router）における、簡単なページコンポーネントの書き方の例である。

以下は、サーバー側でデータを取得（fetch）して表示するサーバーコンポーネントの記述例である。

// app/users/page.js

// APIからユーザーデータを取得する関数（サーバー側で実行される）
async function getUsers() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users', {
    next: { revalidate: 3600 } // 1時間に1回だけデータを再取得する（キャッシュの設定）
  });
  if (!res.ok) {
    throw new Error('ユーザーデータの取得に失敗しました');
  }
  return res.json();
}

// ユーザー一覧を表示するページコンポーネント
export default async function UsersPage() {
  const users = await getUsers();

  return (
    <div style={{ padding: '20px' }}>
      <h1>ユーザー一覧（Next.js サーバーコンポーネント）</h1>
      <ul>
        {users.map(user => (
          <li key={user.id} style={{ margin: '10px 0' }}>
            <strong>{user.name}</strong> - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

このコンポーネントはサーバー上で実行され、APIからデータを取得した状態でHTMLがブラウザに送られる。そのため、ブラウザ側の処理が軽くなり、表示速度が向上しやすくなる。

AIコーディングとの関係

Next.jsは、AIコーディングでたたき台を作りやすいフレームワークの一つである。

App Routerのディレクトリ構成の自動生成

AIに「Next.jsのApp Routerを使って、マイページと設定ページを持つアプリの構成を提案して」と指示すると、必要なフォルダ構造と各 page.js や layout.js のコード案を出力してもらいやすい。フォルダ階層に基づくルーティング仕様が明確であるため、AIにとってもコードの関連性を整理しやすい。

AIへの効果的な指示の出し方

Next.jsには「Server Component（標準）」と「Client Component（"use client" を先頭に書く）」の明確な区別がある。AIに指示を出す際は、これらを意識して使い分けを明示すると意図通りのコードが得られやすい。

指示の例:「Next.jsのApp Routerを使用します。データベースから一覧を取得する部分はServer Componentにし、ボタンのクリックイベントやモーダルの開閉といったインタラクティブな処理を伴う部分は "use client" を指定したClient Componentとして分離して作成してください。」

注意点・確認ポイント

Next.jsはバージョンアップに伴う変更が非常に多く、特に「Pages Router」と呼ばれる古い書き方と「App Router」という新しい書き方がネット上の情報で混在している。AIが古いPages Routerの書き方（pages/ ディレクトリ配下にファイルを置く仕様や、getServerSideProps などの古い関数）を出力した場合は、「App Routerの仕様で書き直してください」と明示的に指示し直す必要がある。

よくある勘違い

Next.jsを使うとWordPressは完全に不要になる？

「Next.jsでブログを作れば、もうWordPressは不要」というのは誤解である。

Next.jsは強力な開発ツールだが、記事を書くための管理画面や、記事の下書き・画像アップロードといった「コンテンツ管理機能（CMS）」を標準では持っていない。

そのため、実務では「WordPressを管理画面（データ提供元）として使い、Next.jsでそのデータを受け取って高速なフロント画面を作る（ヘッドレスCMS構成）」という形で両者を組み合わせて使うケースが非常に多い。

Next.jsはバックエンドサーバーとしてしか動かない？

Next.jsはNode.js上で動作するサーバープログラム（SSR）を実行できるが、必ずしも常にサーバーを稼働させる必要はない。

「静的エクスポート（Static Export）」と呼ばれる設定を使用すれば、Next.jsの強力なコンポーネント開発環境を活かしたまま、ビルド時にすべてのファイルを純粋なHTML/CSS/JSとして出力できる。

出力されたファイルは、一般的なレンタルサーバー（Apache等）や安価な静的配信サーバー（S3など）にアップロードするだけで、サーバー不要で高速に配信可能である。

App RouterとPages Routerはどちらを使っても同じ？

Next.jsには古い「Pages Router」と新しい「App Router」という2つのシステムが存在し、これらは仕組みやコードの書き方が大きく異なる。

Pages Routerで書かれたコードをそのままApp Router環境に貼り付けても動かない。AIから出力されたコードをコピペする際は、対象のファイルがどちらの仕組みで動いているプロジェクトかを必ず確認する必要がある。新規にアプリを作成する場合は、公式ドキュメントでも中心的に扱われているApp Routerを選択するとよい。

情報ソース

まとめ

Next.jsは、Reactをベースにした多機能なWebアプリ開発用フレームワーク。
フォルダ構成をもとにURLパスを作れる「App Router」を搭載している。
サーバー側でHTMLを生成する技術（SSR/SSG）により、初期表示やSEO対策を改善しやすい。
AIコーディングと相性が良いが、古いPages Routerのコードを出力しないよう指示に工夫が必要。

より詳しくAIに聞いてみよう

Next.jsの「App Router」と、従来の「Pages Router」の最大の違いは何ですか？初心者にわかりやすく教えてください。
Next.jsにおける「Server Component」と「Client Component」の使い分けの基準を教えてください。
Next.jsで作ったアプリを静的サイト（Static Export）として出力する際のメリットと制限事項は何ですか？
AIにNext.jsのAPI Routes（APIエンドポイント作成機能）のコードを生成してもらう際、どのようなセキュリティ対策を盛り込むべきですか？
Next.jsの next/image コンポーネント（<Image>）が、通常の <img> タグと比べて優れている点を3つ教えてください。