Next.js 15.5 | Next.js

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 の非推奨警告。

今すぐアップグレードするか、以下で始めましょう

# Use the automated upgrade CLI
npx @next/codemod@canary upgrade latest
 
# ...or upgrade manually
npm install next@latest react@latest react-dom@latest
 
# ...or start a new project
npx create-next-app@latest

Turbopack ビルド（ベータ版）

next build --turbopack がベータ版になったことを発表できることを嬉しく思います。Turbopack は現在、vercel.com、v0.app、および nextjs.org を含む Vercel ウェブサイトに電力を供給しており、プレビューおよび本番デプロイメントビルドの迅速化によるイテレーション速度の向上を実現しています。

Turbopack で稼働しているこれらのアプリケーションは、ロールアウト以降、12億件以上のリクエストを処理するテストを経てきました。

パフォーマンス & 本番結果

Turbopack の当初の設計目標の 1 つは、アプリケーションとコードベースが成長するにつれて、開発者がビルドパフォーマンスをスケーリングできるようにすることでした。これを実現するために、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 との統合には制限がありました。

import { NextRequest, NextResponse } from 'next/server';
 
export const config = {
  runtime: 'nodejs', // Now stable!
};
 
export function middleware(request: NextRequest) {
  // Access to full Node.js APIs and npm packages
  const fs = require('fs');
  const crypto = require('crypto');
 
  // Complex authentication logic
  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 {
  // Use Node.js crypto for validation
  // Access file system, databases, etc.
  return true;
}

この変更により、同じ開発者エクスペリエンスを維持しながら、より複雑なユースケースをミドルウェアで処理できるようになります。

Node.js ランタイムは Next.js 16 ではデフォルトになりませんが、コミュニティからのフィードバックと使用パターンに基づいて、Next.js 17 以降でデフォルトにすることを検討しています。

TypeScript の改善

Next.js 15.5 は、App Router に大幅な TypeScript の改善をもたらし、Turbopack との完全な互換性とルーティングの包括的な型安全性を実現します。

型付きルート（安定版）

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

この機能は typedRoutes フラグで利用可能であり、以前は実験的でしたが、現在は安定版です。静的型付けされたルートは、Webpack と Turbopack の両方のビルドで型安全性を提供する新しい実装を通じて、Turbopack でも機能します。

const nextConfig = {
  typedRoutes: true, // Now stable!
};
 
export default nextConfig;

import Link from 'next/link'
 
// Full type safety for route paths
<Link href="/blog/example-slug?ui=dark">Read Post</Link>
 
// TypeScript catches invalid routes at compile time
<Link href="/invalid-route">Broken Link</Link> // ← Type error

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

ルートエクスポート検証は、型ガードファイルを生成する新しいシステムを通じて Turbopack でも機能し、TypeScript の satisfies 演算子を使用してページ、レイアウト、ルートハンドラーを検証します。

これにより、next build を実行した際のコンパイル中に、不正な dynamic 値などの不正なエクスポートを検出できます。これは、Webpack プラグインを、両方のビルドシステムで機能するよりパフォーマンスの高いソリューションに置き換えるものです。

ルートプロップヘルパー

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

以前: 手動での型指定とインポート

import { Metadata } from 'next';
 
interface Props {
  params: Promise<{ slug: string }>;
  children: React.ReactNode;
  analytics: React.ReactNode; // Manual parallel route typing
  team: React.ReactNode; // Manual parallel route typing
}
 
export default function DashboardLayout(props: Props) {
  return (
    <div>
      {props.children}
      {props.analytics} {/* No type safety for parallel routes */}
      {props.team} {/* No type safety for parallel routes */}
    </div>
  );
}

以後: 並列ルートサポートによる自動型指定

// No need to import LayoutProps - globally available
export default function DashboardLayout(props: LayoutProps<'/dashboard'>) {
  return (
    <div>
      {props.children}
      {props.analytics} {/* Fully typed parallel route slot */}
      {props.team} {/* Fully typed parallel route slot */}
    </div>
  );
}

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

`next typegen`

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

next typegen [directory]

以前は、ルート型はnext devまたはnext buildの実行中にのみ生成されていたため、tsc --noEmitを直接実行してもルート型は検証されませんでした。これで、型を個別に生成し、外部で検証できるようになりました。

# Generate route types first, then validate with TypeScript
next typegen && tsc --noEmit
 
# Or in CI workflows for type checking without building
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 projects
    "lint": "eslint", // Instead of "next lint"
    "lint:fix": "eslint --fix",
 
    // For Biome projects
    "lint": "biome check",
    "format": "biome format --write"
  }
}

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

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

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

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

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

Next.js 16 の非推奨警告

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

`next/link` の `legacyBehavior`

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

// ❌ Will be removed in Next.js 16
<Link href="/about" legacyBehavior>
  <a>About</a>
</Link>
 
// ✅ Modern approach (no changes needed)
<Link href="/about">About</Link>

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

AMP サポート

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

// ❌ Will be removed in 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>;
}

const nextConfig = {
  amp: {
    // ❌ Will be removed in Next.js 16
    canonicalBase: 'https://example.com',
  },
};
 
export default nextConfig;

移行: 以下を含むすべての AMP 関連コードを削除してください。

ページからの export const config = { amp: true }
next.config.ts からの amp 設定
next/amp フックのインポートと使用（useAmp）
その他の AMP 固有の API

AMP がユースケースでまだ必要かどうかを評価してください。ほとんどのパフォーマンス上の利点は、Next.js の組み込み最適化と最新の Web 標準によって達成できるようになりました。

`next/image` 品質設定

Next.js 16 から、quality プロップはデフォルトで 75 のみに制限されます。現在 Next.js 15 では、1 から 100 までの任意の整数を使用できますが、Next.js 16 では 75 以外の品質には明示的な設定が必要になります。

// ⚠️ Will show deprecation warning in Next.js 15.5
// when images.qualities is undefined and quality !== 75
<Image src="/photo.jpg" quality={100} alt="Photo" />
 
// ✅ Explicit configuration required for Next.js 16

const nextConfig = {
  images: {
    qualities: [75, 100], // Explicitly allow quality={100}
  },
};
 
export default nextConfig;

移行: 75 以外の quality プロップを使用している場合は、Next.js 16 で必要な品質値を含めるように next.config.ts で images.qualities を明示的に設定してください。

`next/image` ローカルパターン

Next.js 16 から、クエリ文字列を使用したローカル画像 src パスでは、images.localPatterns での明示的な設定が必要になります。これは、キャッシュバスターやバージョン管理などのクエリパラメータを持つ画像に影響します。

// ⚠️ Will show deprecation warning in Next.js 15.5
// when images.localPatterns is not configured
<Image src="/photo.jpg?v=1" alt="Test" />
 
// ✅ Explicit configuration required for Next.js 16

const nextConfig = {
  images: {
    localPatterns: [
      {
        pathname: '/photo.jpg', // allow exact path
        // omitting "search" will allow all query parameters
      },
      {
        pathname: '/photo.jpg', // allow exact path
        search: '?v=1', // allow exact query parameters
      },
      {
        pathname: '/assets/**', // allow wildcard path
        search: '', // empty search will block all query parameters
      },
    ],
  },
};
 
export default nextConfig;

移行: next.config.ts で images.localPatterns を設定して、画像パスでのクエリ文字列を明示的に許可してください。これにより、セキュリティとパフォーマンスの最適化が向上します。

タイムライン

これらの非推奨警告は Next.js 15.5 から表示されます。機能は Next.js 16 で完全に削除されます。アップグレード時の問題を防ぐため、できるだけ早く移行することをお勧めします。

フィードバックを共有して、Next.js の未来を形作りましょう。

コントリビューター

Next.js は、3,000 人以上の個人開発者による共同作業の結果です。このリリースは、以下によって提供されました。

Next.js チーム: Andrew, Ben, Hendrik, Janka, Jiachi, Jimmy, Jiwon, JJ, Josh, Jude, Rob, Sam, Sebastian, Sebbie, Wyatt, and Zack.
Turbopack チーム: Benjamin, Josh, Luke, Maia, Niklas, Tim, Tobias, and Will.
Next.js Docs チーム: Delba, Rich, Ismael, Joseph, and Lee.

@unstubbable、@gnoff、@RobPruzan、@mischnic、@huozhi、@delbaoliveira、@styfle、@ankur-arch、@skt-t1-byungi、@ijjk、@Han5991、@SyMind、@Anas-github-acc、@hf、@bgw、@wyattjoh、@ztanner、@prateekkish、@eps1lon、@lubieowoce、@timneutkens、@acdlite、@lukesandberg、@bgub、@Cy-Tek、@padmaia、@raunofreiberg、@devjiwonchoi、@sokra、@MidnightDesign、@stephenliang、@allenzhou101、@icyJoseph、@gaojude、@remcohaszing、@wesjune、@wbinnssmith、@m1abdullahh、@Sayakie、@startracex、@chadfennell、@dlehmhus、@Jarred-Sumner、@candymask0712、@stepan662、@PuppyOne、@huperniketes、@xusd320、@MichalMoravik、@fireairforce、@kitfoster、@feedthejim、および @r34son に多大な感謝を!