OpenAINext.jsDec 10, 2024, 8:00 PM

Next.js 15.1

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.1 — React 19, improved debugging, after() and auth APIs

Key Points

  • React 19 stable support
  • after() stabilized for post-response tasks
  • Experimental forbidden()/unauthorized() APIs

Summary

Next.js 15.1 adds stable React 19 support, improved developer debugging (better source maps, collapsed stack frames, consistent Edge runtime errors), the stable after() API for post-response work, and two experimental authorization helpers (forbidden() and unauthorized()). Turbopack is now stable and recommended for more accurate source maps and profiling.

Key Points

  • React 19

    • Pages Router: official React 19 stable support (React 18 still supported).
    • App Router: continues to ship with React canary builds to validate new framework integrations.
  • Improved error debugging

    • Better source maps with ignoreList support to hide external dependency frames.
    • Collapsed stack frames in the browser overlay and terminal; "Show ignored frames" reveals hidden frames.
    • Consistent error output and profiling in the Edge runtime.
  • after() (stable)

    • Run non-blocking secondary work after a response finishes streaming (logging, analytics, sync tasks).
    • Now supports self-hosted servers, runtime APIs (cookies(), headers()), and extensibility for platform waitUntil() implementations.
    • Usage: import { after } from 'next/server'; after(() => { /* secondary task */ });
  • forbidden()/unauthorized() (experimental)

    • New helper APIs to trigger 403/401 flows and provide customizable pages at app/forbidden.tsx and app/unauthorized.tsx.
    • Enable via next.config.ts: { experimental: { authInterrupts: true } }.
    • Note: if triggered after response headers are sent, the status code will be 200 (same behavior as notFound()).
  • Upgrade notes & quick commands

    • Automated: npx @next/codemod@canary upgrade latest
    • Manual: npm install next@latest react@latest react-dom@latest
    • New project: npx create-next-app@latest
  • Miscellaneous

    • Turbopack is stable — recommended for better source-map/method-name mapping and profiling.
    • Several small fixes and features: ESLint 9 in create-next-app, increased cache tags, CSS inlining option, and multiple bug fixes affecting rewrites, server actions, and routing.

Actionable guidance

  • Upgrade to Next.js 15.1 and React 19 if you use the Pages Router; test App Router behavior with the built-in canary where needed.
  • Adopt Turbopack for improved source-mapping and profiling when possible.
  • Populate ignoreList in library sourcemaps to improve consumer debugging.
  • Enable experimental authInterrupts to evaluate forbidden()/unauthorized() and provide custom error pages during development.

Full Translation

Translations

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

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

Next.js 15.1 のリリース

概要

Next.js 15.1 は React 19 の安定サポート、エラーデバッグの改善、新しい実験的な認可 (authorization) APIs、そしてその他の改善を導入します。

主な変更点

  • React 19 の安定サポート
    • Next.js 15.1 は正式に React 19 をサポートします。
  • エラーデバッグの改善
    • エラーメッセージやスタックトレースの改善により、デバッグが容易になっています。
  • 新しい実験的な認可 (authorization) APIs
    • 実験的な authorization APIs が追加され、認可ワークフローの構築を検討できます。
  • その他
    • パフォーマンスや信頼性の向上、バグ修正などの小規模な改善が含まれます。

移行と注意点

  • 既存プロジェクトをアップグレードする際は、依存関係と互換性を確認してください。
  • 実験的な APIs は安定していない可能性があるため、本番環境での使用には注意してください。

詳細

  • 公式のリリースノートやドキュメントを参照して、変更点の詳細を確認してください。
Next.js 15.1 | Next.js | DocsDigest