【Next.js入門】フルスタックWebアプリ開発のための基礎知識と最新機能まとめ
この記事では、Next.js（バージョン15）の基本的な概念から、Reactの最新機能を取り入れたApp Router、そして効率的なデータ取得・操作のための仕組みについて、体系的に解説します。
1. Next.jsとは
Next.jsは、Vercelというアメリカの企業によって開発された、フルスタックのWebアプリケーションを構築するためのReactフレームワークです。
React（UIライブラリ）が持つ機能に加え、Next.jsは以下の機能を追加し、大規模なアプリケーション開発を強力にサポートします。
- 自動ルーティング設定
- 高速化 (コード分割や画像最適化)
- SEO対策
- サーバーサイド機能の提供
1.1. ReactとNext.jsの違い
Reactでは、アプリケーションの読み込みが主にクライアント側で行われるため、最初に真っ白なページが表示された後にJavaScriptが実行され、**UI（ユーザーインターフェース）**が構築・表示される。
一方、Next.jsは、ビルド時やリクエスト時にHTMLがプリレンダリングされるため、リクエストに対してコンテンツをすでに含まれたHTMLがすぐに提供される。これにより、ユーザーはすぐにUIを見ることができるという強みを持つ。（このプリレンダリングされたHTMLの後に、アプリケーションをインタラクティブにするためのJavaScriptが読み込まれる。）
2. レンダリングの種類と戦略
Next.jsが提供する多様なレンダリング戦略は、WebサイトのパフォーマンスとSEOを最適化するために重要です。
| 種類 | 実行場所 | 特徴 | メリット | デメリット |
|---|---|---|---|---|
| CSR (Client-Side Rendering) | クライアント（ブラウザ） | ユーザーのマシンのスペックに依存。 | ページ遷移が高速、動的な操作が可能。 | 初期表示に時間が掛かる、SEO対策に非推奨。 |
| SSR (Server-Side Rendering) | サーバー | リクエスト時にサーバーでJSを実行しHTMLを生成。 | 初回表示が早い、リアルタイム性が高い。 | ページ遷移の際にサーバーで処理されるため、遅くなる場合がある。 |
| SSG (Static Site Generation) | ビルド時 | ビルド時に予めすべてのHTMLを生成し、リクエストに対して返却。 | 表示が最速。 | リアルタイム性に欠ける、更新には手動ビルドが必要。 |
| ISR (Incremental Static Regeneration) | サーバー（実行はビルド時と更新時） | 指定した時間が経過すると、自動でサーバーがビルドを再実行。 | 表示が早く、定期的にコンテンツを更新できる。 | 完全なリアルタイム性はない。 |
3. 環境構築とルーティング
3.1. 環境構築
Next.jsのプロジェクトを作成するには、Node.jsが必要です。
# プロジェクトの作成
npx create-next-app@latest my-next-app
3.2. ルーティング方法
Pages Router
App Routerより古いルーティング方法（2023年以前）です。
App Router (標準)
現在標準とされているルーティング方法です。
- ファイルシステムベースのルーティング：appディレクトリの中に作成したディレクトリとファイルに基づいてURLが決定されます
- 例: app/about/page.tsx → /about
3.3. 動的ルーティング（Dynamic Routing）
ニュース記事のようにIDでページを切り替える際に使用します。
- ファイル名に[]を使って動的なパスを指定します
- 例: app/news/[id]/page.tsx
- ページでIDを使う場合は、引数のparamsから取得できます。コンポーネント関数はasyncにする必要があります
type Props = {
// paramsで渡されるID
params: {
id: string; // IDの型はstringにすることが一般的です
};
};
export default async function Page({ params }: Props) {
return (
<div>
<h1>これは、ID{ params.id }の画面です。</h1>
</div>
);
}
Not Found ページ
存在しないページへのアクセスは、動的ディレクトリより上の階層（例: /news直下など）にnot-found.tsxを配置することで対応できます。
4. サーバー・クライアントコンポーネント
Next.js（App Router）では、コンポーネントの実行場所によって役割が明確に分けられます。
4.1. サーバーコンポーネント (Server Component)
- デフォルト設定：特に指定がない限り、すべてサーバーコンポーネントです
- 実行場所：サーバー側で処理されます
- 特徴：初期表示時のAPI呼び出しやデータ取得（Data Fetching）に適しています
4.2. クライアントコンポーネント (Client Component)
- 設定方法：ファイルの先頭にuse clientと記述します
- 実行場所：クライアント側（ブラウザ）で処理されます
- 特徴：useStateやuseEffectなどのHooksが必要な、ユーザーとのインタラクションを持つコンポーネントに使用します
使い分けの基本：インタラクティブな機能やHooksが必要な部分のみクライアントコンポーネントを使用し、それ以外はパフォーマンスに優れたサーバーコンポーネントを使用するのが基本です。
5. データ取得とAPIルート
5.1. React Server Components (RSC) によるデータフェッチ
Next.jsでは、React Server Componentsの機能を利用し、サーバーコンポーネントの中でasync/awaitを使って直接データ取得が可能です。
これにより、useEffectやuseStateを使わずに、シンプルかつ高速にバックエンドのデータにアクセスできます。
5.2. クライアントコンポーネントでのデータフェッチ
クライアントコンポーネントでAPIを呼び出すのは、クライアントの操作（ボタンクリックなど）によってデータを取得する必要がある場合に限られます。
- use clientコンポーネント内でボタン押下などをトリガーにfetchを実装します
- ページ初期読み込み時にAPIを呼ぶ場合はuseEffectを使えますが、基本的にはサーバーコンポーネントで処理することが推奨されます
5.3. APIルートの作成
Next.jsでは、/app/api/~にroute.tsファイルを配置することで、APIエンドポイントを作成できます。
- URLマッピング：/app/api/news/route.ts → ホスト名/api/news
- NextRequestでリクエストを、NextResponseでレスポンスを扱います
// /app/api/news/[id]/route.ts
import { NextRequest, NextResponse } from 'next/server';
const articles: { [key: string]: { title: string; content: string } } = {
"1": { title: 'news1', content: 'news1の内容'},
"2": { title: 'news2', content: 'news2の内容'},
};
export async function GET(
req: NextRequest, { params }: { params: { id: string } }
) {
const id = params.id
const article = articles[id];
if (!article) {
return NextResponse.json({ message: '記事が見つかりません' }, { status: 404});
}
return NextResponse.json(article);
}
6. Server Actions によるデータ操作
Server Actionsは、フォームを使ったデータの追加・更新・削除処理を簡単に実装するための機能です。
- formタグのaction属性に非同期関数を渡します
- この非同期関数は、関数内にuse serverを追加することで、フォーム送信時にサーバーサイドで実行されます（React 19の機能）
これにより、クライアントとサーバー間の明示的なAPI呼び出しなしに、データのミューテーション（変更）を行うことが可能になります。
まとめ
Next.jsを学ぶ上で重要なキーコンセプトは以下の3つです。
- File-system based routing：フォルダとファイルの構造がパスに反映される
- React Server Components (RSC)：コンポーネントから直接データフェッチ（async/await）が可能
- Server Actions：フォームからサーバーの非同期関数（use server）を呼び出し、データ操作を行う