Next.js 15は2025年末にリリースされ、App Routerのさらなる成熟とパフォーマンス改善が施された現在最も注目のWebフレームワークです。本記事では、Next.js 15の主要機能と実際のプロジェクト構築方法を、コード例を交えて徹底解説します。
Next.js 15の主要な新機能
1. Turbopack（本番環境対応）
Next.js 15ではTurbopackが本番環境でも安定して使えるようになりました。従来のWebpackと比較してビルド時間が最大70%短縮され、大規模プロジェクトでの開発体験が劇的に向上しています。
# Turbopackを使って開発サーバーを起動
npx create-next-app@15 my-app --turbopack
cd my-app
npm run dev2. React 19との完全統合
Next.js 15はReact 19に完全対応しています。React 19の主要機能であるServer Actionsの強化、use()フック、フォーム処理の改善などをフルに活用できます。
// React 19のuse()フックでサーバーデータを取得
import { use } from 'react';
async function fetchUser(id: string) {
const res = await fetch(`/api/users/${id}`);
return res.json();
}
export default function UserProfile({ userId }: { userId: string }) {
const user = use(fetchUser(userId));
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}App Routerの基本構造
Next.js 15のApp Routerは、フォルダ構造がそのままURLになります。基本的なプロジェクト構造は以下のとおりです：
my-app/
├── app/
│ ├── layout.tsx # ルートレイアウト
│ ├── page.tsx # ホームページ (/)
│ ├── blog/
│ │ ├── page.tsx # ブログ一覧 (/blog)
│ │ └── [slug]/
│ │ └── page.tsx # 個別記事 (/blog/[slug])
│ └── api/
│ └── posts/
│ └── route.ts # APIルート
├── components/
├── lib/
└── public/Server ComponentsとClient Componentsの使い分け
Next.js App Routerの核心はServer ComponentsとClient Componentsの適切な使い分けです。
| 種類 | 特徴 | 使うべきケース |
|---|---|---|
| Server Components | サーバーで実行・バンドルに含まれない | データ取得・静的コンテンツ表示 |
| Client Components | ブラウザで実行・インタラクティブ | 状態管理・イベントハンドリング・ブラウザAPI使用 |
// Server Component（デフォルト）- データ取得に最適
// app/posts/page.tsx
import { PostCard } from '@/components/PostCard';
async function getPosts() {
const res = await fetch('https://api.example.com/posts', {
next: { revalidate: 3600 } // 1時間キャッシュ
});
return res.json();
}
export default async function PostsPage() {
const posts = await getPosts();
return (
<div>
{posts.map((post: any) => (
<PostCard key={post.id} post={post} />
))}
</div>
);
}
// Client Component - インタラクティブ機能に使用
// components/LikeButton.tsx
'use client';
import { useState } from 'react';
export function LikeButton({ postId }: { postId: string }) {
const [liked, setLiked] = useState(false);
return (
<button onClick={() => setLiked(!liked)}>
{liked ? '❤️ いいね済み' : '🤍 いいね'}
</button>
);
}Server Actionsで安全なフォーム処理
Server Actionsを使うことで、APIルートを書かずに安全なサーバーサイド処理が実現できます。
// app/contact/actions.ts
'use server';
import { z } from 'zod';
const ContactSchema = z.object({
name: z.string().min(1, '名前を入力してください'),
email: z.string().email('正しいメールアドレスを入力してください'),
message: z.string().min(10, 'メッセージは10文字以上で入力してください'),
});
export async function submitContact(formData: FormData) {
const validatedFields = ContactSchema.safeParse({
name: formData.get('name'),
email: formData.get('email'),
message: formData.get('message'),
});
if (!validatedFields.success) {
return { error: validatedFields.error.flatten().fieldErrors };
}
// データベースへの保存やメール送信処理
// await sendEmail(validatedFields.data);
return { success: true };
}パフォーマンス最適化のベストプラクティス
- Image Optimization：next/imageを使ってWebPに自動変換・遅延読み込みを実現
- Font Optimization：next/fontでGoogle Fontsをセルフホスト・レイアウトシフトを防止
- Code Splitting：動的インポートで不要なJSの読み込みを遅延化
- Caching Strategy：データの種類に応じてISR・SSR・SSGを適切に選択
Next.js 15学習におすすめの教材
Next.jsを体系的に学ぶには、公式ドキュメントに加えて以下の教材がおすすめです：
- Udemy「React + Next.js」コース：日本語で丁寧に解説（セール時2,000円以下）
- 「実践Next.js」（書籍）：App Routerに完全対応した日本語書籍
- 公式Learn Next.js：インタラクティブなチュートリアルで無料学習可能
Next.js 15はWebアプリ開発の標準フレームワークとして確固たる地位を確立しています。App Routerのパターンを理解することが、現代のフロントエンド開発スキルとして必須となりつつあります。本記事が皆さんの学習に役立てば幸いです。