Credit: Dreamstime
Next.js 14, the latest version of Vercel’s React-based framework for web development, previews a compiler improvement for dynamic content.
Introduced October 26, Next.js 14 offers an experimental preview of partial prerendering, a compiler optimization for dynamic content that generates a fast initial static response. Partial prerendering builds on research and development into server-side rendering, static-site generation, and incremental static revalidation. Developers do not need to learn new APIs to use partial prerendering.
Next.js 14 also offers a stable implementation of Server Actions, for defining asynchronous server functions to be called directly from components, with no need to manually create API endpoints. Previously in an alpha state, Server Actions are integrated into the App Router model. Built on web fundamentals such as forms and the FormData web API, Server Actions should be familiar to developers who have used server-centric frameworks in the past, according to Vercel. Mutating data, re-rendering the page, or redirecting can occur in one network round trip, ensuring the correct data is displayed on the client even if the upstream provider is slow. Also, different actions can be composed and reused.
Next.js developers have been working to improve local development performance in both the Pages and App Router since Next.js 13. The Turbopack Rust-based bundler, optimized for JavaScript and TypeScript and Vercel’s successor to Webpack, is expected to move to “stable” in an upcoming minor release. Webpack will still be supported for ecosystem plugins and custom configurations.
Finally, Next.js 14 introduces some metadata improvements. Before web page content can be streamed from the server, important metadata about the viewport, color scheme, and theme first must be sent to the browser. Ensuring these meta tags are sent with initial page content helps smooth the user experience, preventing page flickering. In Next.js 14, blocking and non-blocking metadata have been decoupled. Only a small set of metadata options are blocking; the intent is to ensure non-blocking metadata will not prevent a partially pre-rendered page from serving the static shell.
Predecessor Next.js 13 was introduced a year ago, followed by several point releases.
