Next.jsとは何か

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

なぜ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の使用が推奨されています。

この本で学ぶこと

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

1. Next.jsプロジェクトのセットアップ
2. App Routerによるルーティング
3. Server ComponentsとClient Componentsの使い分け
4. レイアウトとページの構成
5. データの取得と表示

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