概要

Next.jsは、ReactをベースにしたWebアプリ開発のフルスタックフレームワーク。フロントエンドからバックエンドAPIまでを1つのプロジェクトで完結させられる。

• サーバーサイドレンダリング（SSR）・静的生成（SSG）など複数のレンダリング方式を柔軟に使い分けられる
• 1つのリポジトリでUI・API・認証・デプロイまで管理できる統合基盤
• Vercelが開発元であり、クラウドとの親和性が高くゼロ設定で始められる

Next.jsとは何か

ReactはUIを作るライブラリに過ぎず、アプリとして動かすには多くの追加設定が必要になる。Next.jsはその「足りない部分」をすべて統合したフレームワークである。

Reactだけではルーティング・SSR・API・最適化など、アプリ開発に必要な要素を別途ライブラリで補う必要があった。Next.jsはこれらをひとつにまとめ、「設定なしですぐ開発を始められる（Zero Config）」環境を提供する。

用語

できること・できないこと

Next.jsは「Webアプリに必要なほぼすべて」を標準搭載しているが、それゆえに何ができて何ができないかを整理しておくことが重要。

できること

ルーティング・レンダリング・API・認証まで、単一プロジェクトで完結する。

• 画面ルーティング: ファイルを置くだけでURLが生成される（ファイルベースルーティング）
• バックエンドAPI: Route Handlers によりフロントと同じリポジトリでAPIを実装できる
• BFF（Backend For Frontend）: フロントに最適化したAPIレイヤーをアプリ内に持てる
• 認証・認可ミドルウェア: リクエストを受け取る前に認証チェックを差し込める
• 画像・フォント最適化: 自動的に最適なサイズ・形式に変換して配信

できないこと・向かないこと

Next.jsはWebアプリ向けであり、用途を誤ると過剰設計になる。

• モバイルアプリ（iOS / Android）の開発には使えない
• 大規模なバッチ処理・データパイプライン構築には不向き
• CMS・ECの全機能をゼロから代替するものではない

レンダリング方式の違い

Next.jsの最大の強みは「ページごとに最適なレンダリング方式を選べる」こと。SEO・速度・コストの要件に応じて使い分ける。

💡 ポイント: 1つのプロジェクト内でページごとに方式を混在させられるため、「SEOが必要なページはSSG、ログイン後はCSR」といった設計が可能。

App Routerとは

Next.js 13以降に導入された新しい設計方式。「どこでコードを動かすか」をファイル単位で明示的に分離できるようになった。

App Router以前は、サーバーとブラウザの役割分担が曖昧になりやすかった。App RouterではServer Components（サーバーで動く）とClient Components（ブラウザで動く）を明示的に分離することで、パフォーマンスと保守性が向上する。

app/
├── layout.tsx        # 全ページ共通のレイアウト（Server Component）
├── page.tsx          # トップページ（Server Component）
├── dashboard/
│   ├── page.tsx      # ダッシュボード（Server Component）
│   └── chart.tsx     # インタラクティブなグラフ（'use client'を宣言）
└── api/
    └── route.ts      # バックエンドAPI（Route Handler）

用語

💡 ポイント: App RouterはNext.jsの現在の主流設計。新規プロジェクトはApp Routerを前提に学ぶのが望ましい。

TypeScriptとの関係

Next.jsはTypeScriptを標準でサポートしており、型定義を活用することでバグの早期発見・チーム間の仕様共有が容易になる。

TypeScriptとはJavaScriptに「型」の概念を加えた言語。Next.jsではプロジェクト作成時からTypeScriptが推奨されており、APIレスポンス・UIコンポーネント・サーバー/クライアント間のデータすべてに型を付与できる。

用語

参考リンク

• Next.js 公式ドキュメント
• Next.jsとは？React経験者が知るべき違いと導入の判断ポイント
• Webアプリケーション開発史から紐解く Next.js