Next.js 15は、Vercelが開発するReactフレームワークの最新バージョンです。App RouterとReact Server Components（RSC）が安定版となり、Turbopackがデフォルトに採用されるなど、大きな進化を遂げています。本記事では、Next.js 15の新機能から実践的なプロジェクト構築まで徹底解説します。
Next.js 15の主要な新機能・変更点
1. Turbopackがデフォルトに（開発サーバー）
Next.js 15では、RustベースのバンドラーであるTurbopackが開発サーバーのデフォルトとなりました。webpackと比較して最大96%高速な起動時間を実現し、大規模プロジェクトでの開発体験が大幅に向上します。
# 開発サーバー起動（Turbopackがデフォルト）
npx next dev
# webpackを使いたい場合
npx next dev --no-turbo2. React 19の完全サポート
Next.js 15はReact 19に完全対応しています。新しいHooksであるuseとuse Actionなどが使えるようになり、フォーム処理やデータフェッチングのパターンが大きく変わります。
'use client';
import { useActionState } from 'react';
export function ContactForm() {
const [state, formAction, isPending] = useActionState(submitForm, null);
return (
<form action={formAction}>
<input name="email" type="email" required />
<button type="submit" disabled={isPending}>
{isPending ? '送信中...' : '送信'}
</button>
{state?.message && <p>{state.message}</p>}
</form>
);
}3. キャッシュのデフォルト変更
Next.js 15では、fetchリクエストがデフォルトでキャッシュされなくなりました（no-store）。これはデータの一貫性に関する問題を解消するための変更です。
// Next.js 14まで：デフォルトでキャッシュあり
fetch('https://api.example.com/data')
// Next.js 15：デフォルトでキャッシュなし（no-store）
fetch('https://api.example.com/data')
// キャッシュを有効にする場合は明示的に指定
fetch('https://api.example.com/data', { cache: 'force-cache' })4. after() API（安定版）
レスポンス完了後に処理を実行できるafter() APIが安定版になりました。ログ記録・アナリティクス送信・メール送信など、レスポンスに影響しない処理をレスポンス後に実行できます。
import { after } from 'next/server';
export default function Page() {
after(() => {
// レスポンス送信後に非同期で実行
logPageView('/about');
});
return <main>About Page</main>;
}App Routerの実践的な使い方
フォルダ構造
my-app/
├── app/
│ ├── layout.tsx # ルートレイアウト
│ ├── page.tsx # ホームページ
│ ├── about/
│ │ └── page.tsx # /about
│ ├── blog/
│ │ ├── page.tsx # /blog（一覧）
│ │ └── [slug]/
│ │ └── page.tsx # /blog/[slug]（詳細）
│ └── api/
│ └── posts/
│ └── route.ts # APIエンドポイント
├── components/
├── lib/
└── public/Server ComponentsとClient Components
App Routerでは、コンポーネントがデフォルトでServer Componentsになります。インタラクティブな処理が必要な場合のみ、ファイルの先頭に’use client’を追加します。
// Server Component（デフォルト）
// データベースアクセスやAPIコールが可能
async function BlogList() {
const posts = await db.posts.findMany(); // サーバーサイドで実行
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
// Client Component
'use client';
import { useState } from 'react';
function LikeButton({ postId }: { postId: number }) {
const [liked, setLiked] = useState(false);
return (
<button onClick={() => setLiked(!liked)}>
{liked ? '♥ いいね！' : '♡ いいね'}
</button>
);
}Next.js 15のSEO対策
Metadata APIの活用
// app/blog/[slug]/page.tsx
import { Metadata } from 'next';
export async function generateMetadata({ params }): Promise<Metadata> {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
images: [post.ogImage],
},
twitter: {
card: 'summary_large_image',
title: post.title,
description: post.excerpt,
images: [post.ogImage],
}
};
}Next.js 15のデプロイ
Vercel（推奨）
Next.jsの開発元であるVercelが提供するホスティングサービスが最も推奨されます。GitHubとの連携で、プッシュするだけで自動デプロイが可能です。無料プランから始められます。
その他のデプロイ先
- AWS（Amplify・EC2・ECS）：エンタープライズ向け
- GCP（Cloud Run）：コンテナデプロイに適している
- Cloudflare Pages：静的サイトに最適、Edge Runtimeサポート
- Railway・Render：シンプルなデプロイに最適
まとめ
Next.js 15は、App Router・React 19対応・Turbopack採用により、開発体験とパフォーマンスが大幅に向上した重要なバージョンです。特にキャッシュのデフォルト変更は既存プロジェクトへの影響が大きいため、移行時は注意が必要です。
2026年現在、Next.jsはフロントエンドエンジニアにとって最重要フレームワークのひとつです。ぜひ本記事を参考に、Next.js 15を使った開発を始めてみてください。