OpenAINext.jsOct 26, 2023, 4:00 PM

Next.js 14

A condensed section focused on the key takeaways first.

Original Post

Quick Digest

Summary

A condensed section focused on the key takeaways first.

Key Points

  • Turbopack boosts dev startup and Fast Refresh speeds
  • Server Actions stable: simpler server-side mutations from components
  • Partial Prerendering preview: static shell + streamed dynamic content

Summary

Next.js 14 focuses on faster local dev feedback, simpler server mutations, and a preview of Partial Prerendering for faster initial responses. Key runtime and API changes include Turbopack improvements for next dev, stable Server Actions (built on React canary), metadata API updates, and several breaking/deprecation notes. This release also ships a new Next.js Learn course and multiple performance and size improvements.

Key Points

  • Turbopack and compiler

    • Rust-based Turbopack: ~5,000 integration tests passing; up to ~53% faster local server startup and ~95% faster Fast Refresh on large apps when using next dev --turbo.
    • Turbopack will move to stable once all tests pass; webpack remains supported for custom setups.
  • Server Actions (stable)

    • Server Actions allow defining server-run functions called directly from components (forms or direct calls) using 'use server'.
    • End-to-end TypeScript safety, single-network-roundtrip mutations, and integrations: revalidatePath() / revalidateTag(), redirect(), cookies(), useOptimistic(), useFormState(), useFormStatus().
    • Use cases: progressive-enhanced forms, faster mutation UX on slow networks, simpler data mutation patterns without API routes.
  • Partial Prerendering (preview)

    • New compiler optimization that prerenders a static HTML shell defined by React Suspense boundaries; dynamic pieces stream into the same HTTP request (no extra roundtrips).
    • Implements static shell + streamed dynamic content (e.g., user-specific cart via cookies()); may require adding Suspense boundaries for finer granularity.
    • Feature is in active development and will land in a future minor release.
  • Metadata and deprecations

    • Decoupled blocking vs non-blocking metadata. New viewport and generateViewport options introduced.
    • Deprecated: old metadata keys (viewport, colorScheme, themeColor) behavior changed and will be removed in a future major release.
  • Other notable changes

    • Breaking: minimum Node.js 18.17; removed next export command in favor of output: 'export' config; dropped @next/font in favor of next/font; changed ImageResponse import to next/og.
    • Improvements: ~80% smaller function size for a basic app, improved memory for edge runtime in dev, more verbose fetch caching logs available.

Upgrade & Practical Notes

  • To start a new project: npx create-next-app@latest.
  • Try dev perf: run next dev --turbo and monitor areweturboyet.com for Turbopack test progress.
  • Review breaking changes before upgrading (Node version, font and image API imports, next export removal).
  • Start adopting Server Actions in the App Router for simpler forms and mutations; add Suspense boundaries to benefit from Partial Prerendering when it becomes available.

Resources

  • Next.js Learn course: https://nextjs.org/learn
  • Docs and migration guides on nextjs.org for Server Actions, metadata changes, and Turbopack.

Full Translation

Translations

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

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

Next.js 14

Next.js 14

Next.js 14 には次の内容が含まれます:

  • パフォーマンスの改善
  • Server Actions の安定性向上
  • App Router を教える新しいコース
  • その他の改善と新機能