Next.js 15 の新機能と改善点

Next.js 15 が正式にリリースされ、プロダクション環境で利用可能になりました。このリリースでは、パフォーマンスや開発体験の向上に加え、多くのエキサイティングな新機能と改善が含まれています。本記事では、それらの主な変更点を詳しく解説します。

主な新機能と改善点

@next/codemod CLI

Next.js のバージョンアップがより簡単になりました。新しい @next/codemod CLI を使用すると、最新バージョンへのアップグレードをスムーズに行えます。

npx @next/codemod@canary upgrade latest

このコマンドを実行すると、

• 依存関係を最新化
• 利用可能な codemod を一覧表示
• 必要なコード変更を適用

といった処理が自動で行われます。

Async Request APIs (破壊的変更)

Next.js 15 では、リクエスト固有のデータ (headers, cookies, params, searchParams など) にアクセスする API が 非同期 になりました。これにより、サーバー側の処理が最適化され、リクエストを待たずに可能な限りの準備を進められます。

変更前 (同期アクセス)

import { cookies } from 'next/headers';
const cookieStore = cookies();
const token = cookieStore.get('token');

変更後 (非同期アクセス)

import { cookies } from 'next/headers';

export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
  // ...
}

これまでの同期アクセス方法は非推奨となり、await を用いた非同期アクセスが必須になります。

移行を簡単にするため、以下の codemod を実行すると、自動的にコードを変換できます。

npx @next/codemod@canary next-async-request-api .

Caching Semantics (破壊的変更)

Next.js 15 では、デフォルトのキャッシュ動作が変更 されました。

• 変更前: GET Route Handlers はデフォルトでキャッシュされる。
• 変更後: GET Route Handlers はデフォルトでキャッシュされない。

キャッシュを有効にする方法

export const dynamic = 'force-static';

この設定を追加することで、従来のキャッシュ動作を維持できます。

React 19 サポート

Next.js 15 は React 19 RC に対応しました。

• App Router: React 19 に完全対応
• Pages Router: React 18 との後方互換性を維持

Turbopack Dev (Stable)

開発サーバーの起動、Fast Refresh、初期ルートコンパイルの速度が大幅に向上しました。例えば、大規模アプリケーション (例: vercel.com) では、ローカルサーバーの起動が 最大 76.7% 高速化 されています。

Static Indicator

開発中に どのルートが静的であるかを示すインジケーター が追加されました。これにより、どのページがビルド時に最適化されるのかを直感的に把握できます。

unstable_after API (Experimental)

レスポンス送信後に処理を実行できる新しい API です。

使い方

// next.config.js
const nextConfig = {
  experimental: {
    after: true,
  },
};
export default nextConfig;

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';

export default function Layout({ children }) {
  after(() => {
    log();
  });

  return <>{children}</>;
}

これにより、レスポンスのストリーミングをブロックせずに ログ記録や分析処理 を実行できます。

instrumentation.js API (Stable)

エラーログや可観測性の強化 を目的とした API です。エラー発生時に外部サービスへデータを送信できます。

例: エラー時のログ送信

export async function onRequestError(err, request, context) {
  await fetch('https://error-tracker.com/logs', {
    method: 'POST',
    body: JSON.stringify({ message: err.message, request, context }),
    headers: { 'Content-Type': 'application/json' },
  });
}

<Form> コンポーネント (next/form)

新しい <Form> コンポーネントが追加されました。プリフェッチやクライアントサイドナビゲーションを活用できます。

import Form from 'next/form';

export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}

next.config.ts のサポート

TypeScript で next.config.ts を利用できるようになりました。

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  /* 設定オプション */
};

export default nextConfig;

これにより、型安全な設定 と 自動補完 が可能になります。

その他の改善点

• ESLint 9 のサポート (ESLint 8 は非推奨)
• Server Actions のセキュリティ強化
• 外部パッケージのバンドル最適化
• 開発およびビルドのパフォーマンス向上

まとめ

Next.js 15 では、パフォーマンスの向上、開発体験の改善、新機能の追加が行われました。特に、

• @next/codemod CLI でのスムーズなアップグレード
• Async Request APIs の非同期化対応
• Caching Semantics の変更
• React 19 の正式対応

などが重要なポイントです。

ぜひ、最新の Next.js を試してみてください！