Next.js 15はReactベースのフルスタックWebフレームワークで、2026年のフロントエンド開発のデファクトスタンダードとなっています。App Router・Server Components・Streaming・Turbopackなど革新的な機能を持つNext.jsを完全解説します。
Next.js 15の主要な新機能
- Turbopack（安定版）：Webpackの約700倍高速なバンドラー。開発サーバーの起動が劇的に高速化
- React 19完全対応：Server Actions・use()フック・最適化されたハイドレーション
- 部分的プリレンダリング（PPR）：静的と動的コンテンツを同一ルートで最適化
- 改善されたキャッシュ動作：より直感的なデフォルト設定
プロジェクトのセットアップ
npx create-next-app@latest my-app --typescript --tailwind --eslint --app
cd my-app
npm run devApp Routerの基本構造
app/
├── layout.tsx # ルートレイアウト
├── page.tsx # ホームページ
├── blog/
│ ├── page.tsx # /blog
│ ├── [slug]/
│ │ └── page.tsx # /blog/[記事スラッグ]
│ └── layout.tsx # ブログセクションのレイアウト
├── api/
│ └── posts/
│ └── route.ts # /api/posts エンドポイント
└── globals.cssServer ComponentsとClient Componentsの使い分け
// Server Component（デフォルト）
// データベースへの直接アクセス可能・クライアントにJSを送らない
async function BlogList() {
const posts = await db.query('SELECT * FROM posts ORDER BY created_at DESC');
return (
<ul>
{posts.map(post => (
<li key={post.id}>
<a href={`/blog/${post.slug}`}>{post.title}</a>
</li>
))}
</ul>
);
}
// Client Component（インタラクティブな処理が必要な場合）
'use client';
import { useState } from 'react';
function SearchBar({ onSearch }: { onSearch: (q: string) => void }) {
const [query, setQuery] = useState('');
return (
<input
value={query}
onChange={e => {
setQuery(e.target.value);
onSearch(e.target.value);
}}
placeholder="記事を検索..."
/>
);
}Server Actions（フォーム処理の新しい方法）
'use server';
// Server Actionの定義
async function submitContactForm(formData: FormData) {
const name = formData.get('name') as string;
const email = formData.get('email') as string;
const message = formData.get('message') as string;
// バリデーション
if (!name || !email || !message) {
return { error: '全項目を入力してください' };
}
// DBへの保存（サーバーサイドで実行）
await db.insert('contacts', { name, email, message });
return { success: true };
}
// コンポーネントでの使用
function ContactForm() {
return (
<form action={submitContactForm}>
<input name="name" placeholder="お名前" required />
<input name="email" type="email" placeholder="メール" required />
<textarea name="message" placeholder="メッセージ" required />
<button type="submit">送信</button>
</form>
);
}メタデータとSEO最適化
import type { Metadata } from 'next';
// 静的メタデータ
export const metadata: Metadata = {
title: 'Tech Athletes | テック・アスリート',
description: 'エンジニア・プログラマーのための技術情報メディア',
openGraph: {
type: 'website',
locale: 'ja_JP',
url: 'https://tech-athletes.com',
images: [{ url: '/og-image.jpg', width: 1200, height: 630 }]
},
twitter: {
card: 'summary_large_image'
}
};
// 動的メタデータ（ブログ記事ページ）
export async function generateMetadata({ params }: { params: { slug: string } }): Promise<Metadata> {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [{ url: post.thumbnail }]
}
};
}パフォーマンス最適化のベストプラクティス
- next/imageの活用：自動的なWebP変換・遅延読み込み・サイズ最適化
- next/fontの活用：Googleフォントをセルフホスティングしてレイアウトシフトを防止
- PPR（部分的プリレンダリング）の活用：静的シェル＋動的ストリーミング
- Route Segment Config：動的・静的・再検証の細かい制御
まとめ
Next.js 15はApp RouterとServer Componentsにより、パフォーマンスとDXを両立した次世代のWebフレームワークです。Turbopackの安定化でさらに開発体験が向上しており、新規プロジェクトにはNext.js 15を選択することを強く推奨します。