Next.js 14とは？App RouterとServer Componentsで変わる開発スタイル
Next.js 14は、Vercelが開発するReactフレームワークの最新メジャーバージョンです。App Router・Server Components・Server Actionsという3つの革新的機能により、Webアプリ開発のパラダイムが大きく変化しました。本記事では、Next.js 14の全機能をゼロから丁寧に解説します。
1. Next.js 14の新機能まとめ
- Server Actions（安定版）：フォーム処理・データ変更をサーバーサイドで安全に実行
- Partial Prerendering（プレビュー）：静的と動的コンテンツの混在を高速化
- Next.js Learn：公式チュートリアルの大幅リニューアル
- Turbopack改善：ローカル開発サーバーの起動が53%高速化
2. プロジェクトのセットアップ
Next.js 14のプロジェクトを新規作成するには、以下のコマンドを実行します：
npx create-next-app@latest my-app
# TypeScript、ESLint、Tailwind CSS、App Routerを選択推奨
cd my-app
npm run dev3. App Router の基本構造
App Routerはapp/ディレクトリ内のファイル構造によって自動的にルーティングを設定します。
app/
├── layout.tsx # ルートレイアウト（必須）
├── page.tsx # ホームページ（/）
├── about/
│ └── page.tsx # /about ページ
├── blog/
│ ├── page.tsx # /blog 一覧ページ
│ └── [slug]/
│ └── page.tsx # /blog/記事名 詳細ページ
└── api/
└── hello/
└── route.ts # /api/hello エンドポイント4. Server Components vs Client Components
Next.js 14では、コンポーネントはデフォルトでServer Componentsとして動作します。
| 特徴 | Server Components | Client Components |
|---|---|---|
| 実行場所 | サーバー | ブラウザ（+サーバー） |
| useState/useEffect | ×不可 | ○使用可能 |
| データベース直接アクセス | ○可能 | ×不可 |
| バンドルサイズへの影響 | なし | あり |
| イベントハンドラ | ×不可 | ○使用可能 |
| 宣言方法 | デフォルト | ファイル先頭に”use client” |
// Server Component（デフォルト）
// app/posts/page.tsx
async function PostsPage() {
// サーバーサイドで直接DBアクセス可能
const posts = await db.query('SELECT * FROM posts');
return (
<div>
{posts.map(post => (
<article key={post.id}>
<h2>{post.title}</h2>
</article>
))}
</div>
);
}
// Client Component
// app/components/Counter.tsx
'use client';
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(c => c + 1)}>
カウント: {count}
</button>
);
}5. Server Actions でフォーム処理を簡略化
Server Actionsを使うと、APIルートを作成せずにフォーム送信をサーバーで処理できます：
// app/contact/page.tsx
async function submitForm(formData: FormData) {
'use server'; // Server Actionを宣言
const name = formData.get('name') as string;
const email = formData.get('email') as string;
// メール送信・DB保存などを直接実行
await sendEmail({ to: 'admin@example.com', name, email });
return { success: true };
}
export default function ContactPage() {
return (
<form action={submitForm}>
<input name="name" placeholder="お名前" required />
<input name="email" type="email" placeholder="メールアドレス" required />
<button type="submit">送信</button>
</form>
);
}6. データフェッチングのベストプラクティス
6-1. 並列フェッチングでパフォーマンス最適化
// ❌ 直列フェッチング（遅い）
const user = await getUser(id);
const posts = await getUserPosts(id);
// ✅ 並列フェッチング（速い）
const [user, posts] = await Promise.all([
getUser(id),
getUserPosts(id)
]);6-2. Next.jsのキャッシュ戦略
// キャッシュあり（デフォルト）
const data = await fetch('https://api.example.com/data');
// キャッシュなし（常に最新データ）
const data = await fetch('https://api.example.com/data', {
cache: 'no-store'
});
// 時間ベースの再検証（60秒ごと）
const data = await fetch('https://api.example.com/data', {
next: { revalidate: 60 }
});7. パフォーマンス最適化テクニック
7-1. 画像最適化（next/image）
import Image from 'next/image';
// WebP自動変換・レイジーロード・サイズ最適化が自動適用
<Image
src="/hero.jpg"
alt="ヒーロー画像"
width={1200}
height={600}
priority // LCP画像はpriorityを付与
/>7-2. フォント最適化（next/font）
import { Noto_Sans_JP } from 'next/font/google';
const notoSansJP = Noto_Sans_JP({
subsets: ['latin'],
weight: ['400', '700'],
display: 'swap', // CLS（レイアウトシフト）を防止
});
export default function RootLayout({ children }) {
return (
<html lang="ja" className={notoSansJP.className}>
<body>{children}</body>
</html>
);
}8. デプロイ方法：VercelとXserverの比較
| プラットフォーム | 料金 | 特徴 | おすすめ用途 |
|---|---|---|---|
| Vercel（無料） | $0/月 | GitHubと自動連携・CDN込み | 個人・スタートアップ |
| Vercel（Pro） | $20/月 | チーム機能・帯域制限なし | 商用プロジェクト |
| Railway | $5〜/月 | フルスタック対応・DB込み | バックエンド必要な場合 |
| Xserver VPS | ¥830〜/月 | 国内回線・低遅延 | 日本向けサービス |
9. まとめ
Next.js 14は、App Router・Server Components・Server Actionsにより、Reactアプリ開発を大幅に効率化します。特にServer ComponentsによるZero-bundle-sizeとServer Actionsによるシンプルなフォーム処理は、開発生産性を劇的に向上させます。
2026年現在、Next.jsはフロントエンド開発のデファクトスタンダードとなっており、エンジニアとしてマスターしておくべき必須スキルです。ぜひ公式ドキュメントと本記事を参考に、実際のプロジェクトで試してみてください。