Next.jsとは何か

Next.jsは、Reactをベースにしたフルスタックフレームワークです。Vercel社が開発・メンテナンスしており、サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）、APIルートなど、Webアプリケーション開発に必要な機能が最初から組み込まれています。

学習者

Reactを勉強したばかりなのに、もうNext.js？この2つって何が違うの？

ざっくり言うと、Next.jsは「Reactを実戦で使うために足りないもの（ルーティングやサーバー処理など）を最初から揃えたフレームワーク」です。まずはこの章で全体像をつかみましょう。

なぜNext.jsを学ぶのか

Reactだけでは、ルーティングやサーバーサイドレンダリングの仕組みを自分で構築する必要があります。Next.jsを使うことで、これらの複雑な設定から解放され、アプリケーションのロジックに集中できます。

主なメリットは以下の通りです：

• ファイルベースルーティング — ディレクトリ構成がそのままURLになる
• サーバーコンポーネント — デフォルトでサーバー側でレンダリングされ、パフォーマンスが向上
• 自動コード分割 — ページごとに必要なJavaScriptだけが読み込まれる
• 組み込みの最適化 — 画像、フォント、スクリプトの最適化が標準装備

Hello World

まずはもっともシンプルなNext.jsのページを見てみましょう。

// app/page.tsx
export default function Home() {
  return (
    <main>
      <h1>Hello, Next.js!</h1>
      <p>はじめてのNext.jsアプリケーション</p>
    </main>
  );
}

たったこれだけで、/ にアクセスしたときに表示されるページが完成します。app/page.tsx というファイルを作るだけで、Next.jsが自動的にルーティングを設定してくれるのです。

App RouterとPages Router

Next.jsには2つのルーティング方式があります：

本書では App Router を前提に解説を進めます。2024年以降の新規プロジェクトでは、App Routerの使用が推奨されています。

先生

ネットにはPages Router時代の記事もまだ多いから、調べるときは「App RouterかPages Routerか」を意識すると混乱しないよ。本書は一貫してApp Routerで進めるね。

この本で学ぶこと

本書を通じて、以下のスキルを身につけることを目指します：

1. Next.jsプロジェクトのセットアップ
2. App Routerによるルーティングと動的ルーティング
3. Server ComponentsとClient Componentsの使い分け
4. レイアウトと共通UI
5. データの取得とキャッシュ、ローディングとエラー処理
6. メタデータとSEO、Server Actionsによるデータ更新

次の章では、実際にNext.jsの開発環境を構築していきます。