Next.jsとは
Next.js（ネクストジェイエス）は、Vercelが開発しているReactベースのウェブフレームワークです。SSR（サーバーサイドレンダリング）・SSG（静的サイト生成）・ISR（インクリメンタル静的再生成）・API Routesなどの機能をReactに追加し、本番環境に適したウェブアプリケーションを効率的に構築できます。
2024年のApp Router（Next.js 13+）では、React Server Componentsを採用し、より高性能でシンプルなアプリケーション構造が実現されました。2026年現在はNext.js 15がリリースされています。
ReactとNext.jsの違い
| 項目 | React（CRA/Vite） | Next.js |
|---|---|---|
| レンダリング | クライアントサイド（CSR）のみ | SSR・SSG・ISR・CSRを選択可能 |
| ルーティング | React Router等が必要 | ファイルベースルーティング（内蔵） |
| SEO | 弱い（SPAの初期HTML問題） | SSRでSEO対応が容易 |
| APIルート | 別途サーバーが必要 | API Routesで一体化（内蔵） |
| 最適化 | 手動設定 | 画像・フォント最適化が自動 |
App Routerの基本構造
Next.js App Routerでは、`app/`ディレクトリ内のファイル構造がそのままURLルートになります。
- `app/page.tsx` → `/`（トップページ）
- `app/about/page.tsx` → `/about`
- `app/blog/[slug]/page.tsx` → `/blog/任意のスラッグ`（動的ルート）
- `app/layout.tsx` → 共通レイアウト（ナビゲーション・フッター等）
- `app/api/route.ts` → APIエンドポイント
Server ComponentsとClient Components
App RouterのReactコンポーネントはデフォルトでServer Componentsです。サーバーで実行され、クライアントにHTMLを送信します。インタラクティブな処理（状態管理・イベントハンドラ）が必要な場合は、ファイルの先頭に`’use client’`を追加してClient Componentにします。
- Server Component（デフォルト）：データフェッチ・DB接続・ファイル読み込み
- Client Component（’use client’）：useState・useEffect・ボタンクリック処理
データフェッチの方法
App RouterではServer Componentでasync/awaitを使って直接データフェッチができます。
- fetch()によるAPIコール：`const data = await fetch(‘https://api.example.com/data’)`
- ORMによるDB接続：Prisma・Drizzleを使ったサーバーサイドDB接続
- キャッシュ制御：`{cache: ‘force-cache’}`（SSG相当）、`{cache: ‘no-store’}`（SSR相当）、`{next: {revalidate: 60}}`（ISR相当）
Vercelへのデプロイ
- GitHubにリポジトリをプッシュ
- Vercelにサインアップ（GitHubアカウントで可）
- 「New Project」からリポジトリをインポート
- 環境変数を設定（.envファイルの内容）
- 「Deploy」ボタンをクリック → 自動ビルド・デプロイ
プッシュするたびに自動デプロイされ、PRのプレビューデプロイも自動生成されます。
まとめ
Next.jsは現代のウェブアプリケーション開発のデファクトスタンダードです。Reactの知識があれば比較的スムーズに習得でき、SEOに強いウェブサイトから複雑なウェブアプリケーションまで幅広く対応できます。まずは公式チュートリアル（nextjs.org/learn）でApp Routerの基礎を学ぶことから始めましょう。
コメントを残す