Next.js 15.5

claudejamodel: claude-sonnet-4-20250514

Next.js 15.5

2025年8月18日月曜日

投稿者: Ben Gubler @ bgub_、Luke Sandberg @ lukeisandberg

Next.js 15.5には、ベータ版のTurbopackビルド、安定版のNode.jsミドルウェア、TypeScriptの改善、next lintの非推奨化、およびNext.js 16の非推奨警告が含まれています。

このリリースのハイライト

Turbopackビルド（ベータ版）: 本番環境のturbopackビルド（next build --turbopack）がベータ版で利用可能
Node.jsミドルウェア（安定版）: ミドルウェアのNode.jsランタイムサポートが安定版に
TypeScriptの改善: 型付きルート、ルートエクスポート検証、ルート型ヘルパー
next lint: next lintコマンドの非推奨化
Next.js 16: Next.js 16の非推奨警告

アップグレード方法

今すぐアップグレードするか、以下のコマンドで開始してください：

# 自動アップグレードCLIを使用
npx @next/codemod@canary upgrade latest

# ...または手動でアップグレード
npm install next@latest react@latest react-dom@latest

# ...または新しいプロジェクトを開始
npx create-next-app@latest

Turbopackビルド（ベータ版）

next build --turbopackのベータ版リリースを発表できることを嬉しく思います。Turbopackは現在、vercel.com、v0.app、nextjs.orgを含むVercelのウェブサイトを支えており、より高速なプレビューと本番デプロイメントビルドを通じて反復速度を向上させています。

Turbopackで動作するこれらのアプリケーションは、ロールアウト以来12億件以上のリクエストを処理し、実戦でテストされています。

パフォーマンスと本番環境での結果

Turbopackの元々の設計目標の一つは、アプリケーションとコードベースの成長に合わせて開発者がビルドパフォーマンスをスケールできるよう支援することでした。これを実現するため、Turbopackはビルドのすべてのフェーズで複数のCPUコアを活用するよう一から設計されました。

多くのVercel製品でTurbopackを使用したビルドをデプロイし、コンパイル時間の一貫した改善を確認しました：

顧客サイト: 4コアマシンで2倍高速
顧客サイト: 14コアマシンで2.2倍高速
小規模サイト（10Kモジュール）: 30コアマシンで4倍高速
中規模サイト（40Kモジュール）: 30コアマシンで2.5倍高速
大規模サイト（70Kモジュール）: 30コアマシンで5倍高速

主要なWebアプリケーションにTurbopackをロールアウトする際、本番環境でのパフォーマンス低下や障害を注意深く監視しました。Webpackと比較して、本番環境メトリクス監視では、Turbopackでビルドされたサイトは同等またはより少ないJavaScriptとCSSをより少ないリクエストで提供し、FCP、LCP、TTFBメトリクスが同等またはより良い結果を示しています。

開発環境でTurbopackを採用したチームには、ビルドでもTurbopackを試すことをお勧めします。

既知の違い

小規模プロジェクト: 小規模なマシンやプロジェクトでは、Webpackの組み込み永続キャッシュにより、ビルド時間の改善は限定的または中立的でした。現在、すべてのビルドを増分かつ高速にするという設計目標を実現するため、Turbopack用の永続キャッシュソリューションに取り組んでいます。
バンドル最適化: 一部のエッジケースで、webpackがより最適化されたバンドルを生成することを測定しました。これらのシナリオを追跡し、安定版リリース前にギャップを埋めるよう取り組んでいます。バンドルサイズに関する詳細はドキュメントを参照してください。
CSS順序: Turbopackでの副作用処理に関する異なるヒューリスティックにより、CSSファイルがwebpackとは異なる順序で連結され、視覚的な違いが生じる可能性があります。詳細な説明と推奨解決策についてはドキュメントを参照してください。

注意: これらの違いは文書化されており、改善に積極的に取り組んでいます。詳細情報と回避策については、Turbopackドキュメントを参照してください。安定版リリースに向けて反復する中で、問題があればGitHubで報告してください。

Node.jsミドルウェア（安定版）

15.2リリースでNode.jsランタイムの実験的サポートを導入し、本番アプリケーションで広範囲にテストした後、Node.jsミドルウェアランタイムの安定版サポートを発表できることを嬉しく思います。

以前、Next.jsミドルウェアはEdge Runtimeのみをサポートしており、より良いパフォーマンスと分離を提供していましたが、Node.js固有のライブラリやAPIとの統合に制限がありました。

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';

export const config = {
  runtime: 'nodejs', // 安定版になりました！
};

export function middleware(request: NextRequest) {
  // 完全なNode.js APIとnpmパッケージへのアクセス
  const fs = require('fs');
  const crypto = require('crypto');
  
  // 複雑な認証ロジック
  const token = request.headers.get('authorization');
  if (!isValidToken(token)) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  
  return NextResponse.next();
}

function isValidToken(token: string | null): boolean {
  // 検証にNode.js cryptoを使用
  // ファイルシステム、データベースなどにアクセス
  return true;
}

この変更により、同じ開発者体験を維持しながら、ミドルウェアでより複雑なユースケースを処理できるようになります。Node.jsランタイムはNext.js 16でデフォルトにはなりませんが、コミュニティのフィードバックと使用パターンに基づいて、Next.js 17からデフォルトにすることを検討しています。

TypeScriptの改善

Next.js 15.5では、App Routerに対する大幅なTypeScriptの改善が導入され、完全なTurbopack互換性とルーティングの包括的な型安全性が提供されます。

型付きルート（安定版）

型付きルートは、アプリケーションのルートに対してコンパイル時の型安全性を提供し、無効なリンクが本番環境に到達する前にキャッチします。この機能は、ファイル構造に基づいて自動的に型を生成し、すべての<Link>コンポーネントが有効なルートを指すことを保証します。

この機能は、以前は実験的だったtypedRoutesフラグの背後で利用可能で、現在は安定版です。

// next.config.ts
const nextConfig = {
  typedRoutes: true, // 安定版になりました！
};

export default nextConfig;

import Link from 'next/link'

// ルートパスの完全な型安全性
<Link href="/blog/example-slug?ui=dark">Read Post</Link>

// TypeScriptがコンパイル時に無効なルートをキャッチ
<Link href="/invalid-route">Broken Link</Link> // ← 型エラー

ルートエクスポート検証（Turbopack）

ルートエクスポート検証も、型ガードファイルを生成する新しいシステムを通じてTurbopackで動作し、TypeScriptのsatisfies演算子を使用してページ、レイアウト、ルートハンドラーを検証します。これにより、next build実行時のコンパイル中に不正な動的値などの無効なエクスポートがキャッチされ、古いWebpackプラグインがより高性能で両方のビルドシステムで動作するソリューションに置き換えられます。

ルートPropsヘルパー

Next.jsは、完全なパラメータ型付けとインポート不要で、グローバルに利用可能なPageProps、LayoutProps、RouteContext型を自動生成します：

変更前: 手動型付けとインポート

import { Metadata } from 'next';

interface Props {
  params: Promise<{ slug: string }>;
  children: React.ReactNode;
  analytics: React.ReactNode; // 手動並列ルート型付け
  team: React.ReactNode; // 手動並列ルート型付け
}

export default function DashboardLayout(props: Props) {
  return (
    <div>
      {props.children}
      {props.analytics} {/* 並列ルートの型安全性なし */}
      {props.team} {/* 並列ルートの型安全性なし */}
    </div>
  );
}

変更後: 並列ルートサポート付き自動型付け

// LayoutPropsのインポート不要 - グローバルに利用可能
export default function DashboardLayout(props: LayoutProps<'/dashboard'>) {
  return (
    <div>
      {props.children}
      {props.analytics} {/* 完全に型付けされた並列ルートスロット */}
      {props.team} {/* 完全に型付けされた並列ルートスロット */}
    </div>
  );
}

システムは、動的ルート、並列ルート、next.config.jsからのカスタムルートをサポートして、ファイル構造からルートを自動発見します。型生成は開発モードとビルドモードの両方で実行され、開発中にファイル構造が変更されると即座に型を再生成し、以前の実装で使用されていた多くの個別ファイルではなく、少数の最適化されたファイルのみを生成することで大規模プロジェクトに効率的にスケールします。

next typegen

next devやnext buildを実行せずに手動で型生成を行うためのnext typegenコマンドを追加しました。これは外部型検証シナリオで特に有用です。

next typegen [directory]

以前は、ルート型はnext devやnext build中にのみ生成されていたため、tsc --noEmitを直接実行してもルート型は検証されませんでした。現在は独立して型を生成し、外部で検証できます：

# 最初にルート型を生成し、次にTypeScriptで検証
next typegen && tsc --noEmit

# またはビルドせずに型チェックを行うCIワークフローで
next typegen && npm run type-check

next lintの非推奨化

Next.js 15.5以降、next lintコマンドは非推奨警告を表示し、Next.js 16で削除されます。これにより、明示的なESLint設定への移行と、高速な代替手段としてのBiomeの導入により、リンティング体験が現代化されます。

新しいNext.jsプロジェクトを作成する際、ESLint（包括的なルール）、Biome（少ないルールで高速）、またはリンターなしから選択できるようになりました。ESLintプロジェクトは、next lintコマンドラッパーに依存する代わりに、明示的なeslint.config.mjsファイルを生成し、リンティングルールの完全な透明性を提供します。Biomeプロジェクトは、Next.jsとReactルールに加えて組み込みフォーマット機能を備えた最適化された設定を受け取ります。

生成されるpackage.jsonスクリプトは、リンターを直接呼び出すようになりました：

{
  "scripts": {
    // ESLintプロジェクト
    "lint": "eslint", // "next lint"の代わり
    "lint:fix": "eslint --fix",
    
    // Biomeプロジェクト
    "lint": "biome check",
    "format": "biome format --write"
  }
}

既存のプロジェクトでは、新しいcodemodがnext lintからESLint CLIへの移行を自動化します：

npx @next/codemod@latest next-lint-to-eslint-cli .

codemodは、機能を保持しながらpackage.jsonスクリプトをインテリジェントに変換し、--strictなどのNext.js固有のフラグを--max-warnings 0にマッピングし、必要な依存関係を自動的にインストールします。

この移行により、開発者はより良いエコシステム互換性でリンティング設定を直接制御できるようになります。

注意: ESLint設定が存在する場合、next buildは引き続きリンティング検証ステップを実行します。ビルド中のこの自動リンティングもNext.js 16で削除され、リンティングの実行時期と方法を完全に制御できるようになります。

Next.js 16の非推奨警告

Next.js 15.5では、今後のNext.js 16リリースに備えるための非推奨警告が導入されます。これらの警告は開発およびビルドログに表示され、これらの機能が削除される前に移行する時間を提供します。

next/linkのlegacyBehavior

next/linkのlegacyBehavior propはNext.js 16で削除されます。このpropは、Next.js 12から13への移行中の一時的な互換性レイヤーとして導入されました。

// ❌ Next.js 16で削除されます
<Link href="/about" legacyBehavior>
  <a>About</a>
</Link>

// ✅ モダンなアプローチ（変更不要）
<Link href="/about">About</Link>

移行: legacyBehavior propと子要素の<a>要素を削除してください。Linkコンポーネントは現在、スタイリングとアクセシビリティを自動的に処理します。

AMPサポート

Next.js AMPサポートはNext.js 16で削除されます。AMPの採用は大幅に減少し、この機能の維持はフレームワークに複雑さを追加しています。すべてのAMP関連のAPIと設定が削除されます。

// pages/amp-page.js
// ❌ Next.js 16で削除されます
import { useAmp } from 'next/amp';

export const config = { amp: true };

export default function AmpPage() {
  const isAmp = useAmp();
  return <div>AMP Page: {isAmp ? 'AMP' : 'HTML'}</div>;
}

// next.config.ts
const nextConfig = {
  amp: {
    // ❌ Next.js 16で削除されます

Summary

Summary

Key Points

Migration Notes

Translations

Next.js 15.5

このリリースのハイライト

アップグレード方法

Turbopackビルド（ベータ版）

パフォーマンスと本番環境での結果

既知の違い

Node.jsミドルウェア（安定版）

TypeScriptの改善

型付きルート（安定版）

ルートエクスポート検証（Turbopack）

ルートPropsヘルパー

next typegen

next lintの非推奨化

Next.js 16の非推奨警告

next/linkのlegacyBehavior

AMPサポート