Next.js 14 Unveiled: A Turbocharged Journey into Revolutionary Performance

Exploring the Breakthroughs: Compiler Evolution, Practical Benchmarks, and Milestones Ahead
At Next.js Conf, the announcement of Next.js 14 stands as a testament to a focused and groundbreaking release. Here's what this version brings to the table:

1. Turbopack Unleashed:
5,000 tests aced for the App & Pages Router, ensuring robustness and reliability. Enjoy a 53% faster local server startup, while code updates with Fast Refresh are now a blazing 94% quicker.

2. Server Actions, Now Stable:
Introducing progressively enhanced mutations. Integrated seamlessly with caching and revalidating, these actions provide a simple function call or work natively with forms, offering enhanced functionality and efficiency.

3. Partial Prerendering, on the Horizon:
Get ready for fast initial static responses coupled with streaming dynamic content. With Partial Prerendering (Preview), your applications can achieve lightning-fast performance.

4. Next.js Learn, a New Resource:
A free course that dives deep into the App Router, authentication, databases, and more. Perfect for developers eager to explore and leverage the power of Next.js.

The Next.js 14 release signifies a leap forward in performance, functionality, and accessibility. Get ready to elevate your web development game!

upgrade your project today using

npx create-next-app@latest

Next.js Compiler: Turbocharged for Enhanced Performance

• Next.js has been diligently improving local development performance in Pages and App Router since version 13.
• The approach shifted towards incremental updates for stability and full feature support.
• Turbopack, our Rust-based engine, now boasts 5,000 passing integration tests.
• Practical performance gains observed on vercel.com:
• Up to 53.3% faster local server startup.
• Code updates via Fast Refresh are up to 94.7% quicker.
• Expect a consistent boost in performance with 90% of next dev tests passing.
• Stability milestone anticipated upon achieving 100% test pass rate, with ongoing webpack support.
• Monitor test pass percentages at areweturboyet.com. Experience accelerated local development with Next.js, leveraging the turbocharged compiler for enhanced speed and stability.

Forms and Mutations

In Next.js 14, our goal is to streamline the process for developers in crafting data mutations. Additionally, we aim to enhance the user experience, especially in scenarios involving slow network connections or form submissions from lower-powered devices

Server Actions, Now Stable

What if you didn't need to manually create an API Route? Instead, you could define a function that runs securely on the server, called directly from your React components.

The App Router is built on the React canary channel, which is stable for frameworks to adopt new features. As of v14, Next.js has upgraded to the latest React canary, which includes stable Server Actions.

The example from the Pages Router can be simplified to one file

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }

  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Server Actions in Next.js 14, inspired by familiar server-centric frameworks, leverage web fundamentals like forms and the FormData Web API.

You can use them directly as functions, enhancing TypeScript for full end-to-end type-safety. They enable efficient data mutations, rendering, and redirection in a single network roundtrip, ensuring accurate client data presentation even with slower upstream providers. Compose and reuse various actions within the same route for added versatility.

Other Changes

[Breaking] Minimum Node.js version is now 18.17
[Breaking] Removes WASM target for next-swc build (PR)
[Breaking] Dropped support for @next/font in favor of next/font (Codemod)
[Breaking] Changed ImageResponse import from next/server to next/og (Codemod)
[Breaking] next export command is deprecated in favor of output: 'export' (Docs)
[Deprecation] onLoadingComplete for next/image is deprecated in favor of onLoad
[Deprecation] domains for next/image is deprecated in favor of remotePatterns
[Feature] More verbose logging around fetch caching can be enabled (Docs)
[Improvement] 80% smaller function size for a basic create-next-app application
[Improvement] Enhanced memory management when using edge runtime in development