OpenAINext.jsApr 9, 2025, 8:00 PM

Next.js 15.3

A condensed section focused on the key takeaways first.

Original Post

Quick Digest

Summary

A condensed section focused on the key takeaways first.

openaienmodel: gpt-5-mini-2025-08-07

Next.js 15.3

Key Points

  • Turbopack builds (alpha)
  • onNavigate and useLinkStatus navigation hooks
  • Early client instrumentation hook

Summary

Next.js 15.3 ships Turbopack for production builds (alpha), community Rspack support, a client-side instrumentation hook, new navigation hooks, and significant TypeScript language-server performance improvements. This release focuses on faster builds, earlier client observability, and finer-grained client navigation control. Engineers should validate Turbopack and Rspack in staging or preview environments before using in mission-critical production.

Key Points

  • Turbopack builds (alpha): run next build --turbopack. Integration tests are ~99% passing; recommended for preview/staging and local testing only. Performance scales with CPU (e.g., ~+28% @4 cores, ~+60% @16 cores, ~+83% @30 cores). Persistent caching work is ongoing.
  • Rspack (experimental): community adapter (next-rspack) provides near-Webpack compatibility for teams that cannot move to Turbopack yet; ~96% tests passing against the integration suite.
  • Client instrumentation hook: add instrumentation-client.js|ts at the project root to initialize monitoring/analytics/error tracking before your app code runs.
  • Navigation hooks: onNavigate (Link prop) can inspect or cancel SPA navigations; useLinkStatus returns a pending boolean for localized loading indicators during transitions.
  • Config change: Turbopack options moved from experimental.turbo to a top-level turbopack key in next.config.ts (the old option remains supported until the next major release).
  • TypeScript plugin: LSP response times improved ~60% in large codebases, fixing hangs/crashes and improving editor responsiveness.

Upgrade and testing

  • Automated upgrade: npx @next/codemod@canary upgrade latest
  • Manual upgrade: npm install next@latest react@latest react-dom@latest
  • New project: npx create-next-app@latest
  • Recommendations: test Turbopack in staging/preview, compare bundle size and performance, and report feedback via GitHub discussions/issues.

Full Translation

Translations

A translation section that keeps the flow of the original article.

openaijamodel: gpt-5-mini-2025-08-07

Next.js 15.3 リリース

概要

Next.js 15.3 では、ビルドに Turbopack を導入し、新しいクライアント側の計測(instrumentation)とナビゲーション用フックが追加されるなど、パフォーマンスと開発体験の向上を目的とした複数の改善が含まれています。

主な新機能

  • Turbopack をビルドシステムとして導入
    • ビルド速度と開発時の応答性の向上を目的としています。
  • 新しいクライアント計測(instrumentation)機能
    • クライアント側でのパフォーマンス計測やトレースを容易にします。
  • ナビゲーション用のフックを追加
    • ルーティングやページ遷移に関するカスタマイズや計測が行いやすくなります。
  • その他の改善とバグ修正

移行と注意点

  • 既存プロジェクトをアップグレードする際は、互換性や設定の変更点をドキュメントで確認してください。
  • 新しいビルドシステム(Turbopack)導入に伴い、一部設定やプラグインの見直しが必要になる場合があります。

詳細情報

リリースノートや公式ドキュメントで、各機能の詳細やアップグレード手順を確認してください。