Next.js 15の新機能を試してみた

Next.js 15が正式リリースされました！今回は、実際にプロジェクトをアップグレードして、主要な新機能を試してみたので紹介します。

主な新機能

1. React 19のサポート

Next.js 15では、React 19のCanaryバージョンがサポートされました。

{
  "dependencies": {
    "next": "15.4.6",
    "react": "19.1.0",
    "react-dom": "19.1.0"
  }
}

2. Turbopack（開発環境）

開発環境でのTurbopackサポートが改善されました：

npm run dev --turbopack

体感的に、開発サーバーの起動が高速化されています。

3. 新しいキャッシング戦略

// app/page.tsx
export default async function Page() {
  // fetch APIのキャッシュ戦略が改善
  const data = await fetch('https://api.example.com/data', {
    cache: 'force-cache'
  });
  
  return <div>{/* コンテンツ */}</div>;
}

アップグレード手順

1. 依存関係の更新

npm install next@latest react@latest react-dom@latest
npm install @types/react@latest @types/react-dom@latest

2. 設定ファイルの確認

next.config.jsの設定を確認し、非推奨の設定があれば更新：

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // 新しい設定オプション
  experimental: {
    serverActions: {
      bodySizeLimit: '2mb'
    }
  }
};

export default nextConfig;

パフォーマンス改善

ビルド時間の短縮

実際にビルド時間を計測してみました：

• Next.js 14: 約45秒
• Next.js 15: 約32秒

約30%の改善が確認できました。

バンドルサイズの最適化

新しいTree Shakingアルゴリズムにより、不要なコードの除去が改善されています。

注意点

Breaking Changes

1. Node.js 18以上が必須
2. 一部のExperimental機能の変更
3. 古いMiddleware APIの非推奨化

移行時のチェックポイント

// 以前の書き方（非推奨）
export function middleware(request: NextRequest) {
  // 古いAPI
}

// 新しい書き方
export function middleware(request: NextRequest) {
  // 新しいAPI使用
}

まとめ

Next.js 15は、パフォーマンス向上と開発体験の改善に焦点を当てたアップデートです。

アップグレードを推奨する理由：

✅ React 19の新機能が使える
✅ 開発・ビルド時間の短縮
✅ より良いキャッシング戦略
✅ 改善されたTurbopack

ただし、本格的な本番運用では、十分なテストを行ってからの移行をお勧めします。

---

次回は、React 19の新しいHooksについて詳しく解説します。