Next.js 14: Turbocharging Development, Simplified Mutations, and Partial Prerendering

Originally published on www.ghazikhan.in

Welcome to the world of Next.js 14! In this blog post, we'll dive into the exciting new features and improvements this latest version brings to the table. If you're a beginner software engineer or someone looking to expand their knowledge of Next.js, you're in the right place. We'll break down the key updates and provide code examples to help you understand these concepts better.

Turbocharged Local Development

In Next.js 13, the focus was on improving local development performance, particularly for the Pages and App Router. To achieve this, they introduced a Rust-based compiler called Turbopack. The result? Faster local server startup and significantly quicker code updates with Fast Refresh. Let's see how you can experience these improvements in your projects.

Faster Local Server Startup

Local development just got a major speed boost with up to 53.3% faster server startup. This means your development server starts quickly, reducing those annoying wait times.

Speedy Code Updates with Fast Refresh

Next.js 14 has achieved up to 94.7% faster code updates with Fast Refresh. This means when you make changes to your code, you'll see those updates almost instantly. No more manual refreshes!

How to Use it?

To leverage these improvements, you can use the next dev --turbo command in your project. It's that simple!

# Run your Next.js app with Turbo mode
next dev --turbo

The team is working hard to ensure that this turbocharged local development experience becomes the new norm, so stay tuned for more exciting updates.

Simplifying Forms and Mutations

Next.js 14 introduces a more user-friendly way of handling data mutations. Whether you're submitting forms or interacting with APIs, these changes are designed to enhance the developer experience and improve performance, especially in scenarios with slow network connections.

Server Actions (Stable)

The new concept of Server Actions allows you to define functions that run securely on the server and can be called directly from your React components. This means you don't need to manually create API Routes anymore. Let's see how it works:

// app/page.tsx
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 can be used with forms for progressive enhancement, but you can also call them directly as functions. This provides strong type-safety when using TypeScript, ensuring a smooth end-to-end experience between the client and server.

Caching, Revalidating, Redirecting, and More

Server Actions are deeply integrated into the App Router, allowing you to revalidate cached data, redirect to different routes, set and read cookies, handle optimistic UI updates, and display loading states. This makes complex scenarios like data mutations and re-rendering a breeze.

Previewing Partial Prerendering

Partial Prerendering is a fascinating addition to Next.js, aimed at optimizing dynamic content with a fast initial static response. It's built on React Suspense and simplifies the developer experience without introducing new APIs.

How It Works

With Partial Prerendering enabled, your page generates a static shell based on <Suspense> boundaries. These boundaries define where dynamic content will be inserted later. When a request is made, the static HTML shell is immediately served. Dynamic components are streamed in as part of the same HTTP request, minimizing network roundtrips.

// app/page.tsx
export default function Page() {
  return (
    <main>
      <header>
        <h1>My Store</h1>
        <Suspense fallback={<CartSkeleton />}>
          <ShoppingCart />
        </Suspense>
      </header>
      <Banner />
      <Suspense fallback={<ProductListSkeleton />}>
        <Recommendations />
      </Suspense>
      <NewProducts />
    </main>
  );
}

Partial Prerendering simplifies the process of achieving fast initial static responses without compromising on personalization.

Metadata Improvements

In Next.js 14, important metadata about the viewport, color scheme, and theme are decoupled into blocking and non-blocking categories. This ensures a smoother user experience, particularly when streaming the initial page content.

Learning Next.js

If you're new to Next.js or want to brush up on your knowledge, Next.js Learn offers a free course covering various aspects of the framework, from setting up your database to improving accessibility and adding metadata. It's a valuable resource to kickstart your Next.js journey.

Other Notable Changes

Next.js 14 comes with several breaking changes, deprecations, and improvements. Here are a few worth noting:

• Minimum Node.js version is now 18.17.

• WASM target for next-swc build is removed.

• Support for @next/font is dropped in favor of next/font.

• ImageResponse import is changed from next/server to next/og.

• next export command is deprecated in favor of output: 'export'.

These changes aim to enhance the framework's performance, security, and developer experience.

Conclusion

Next.js 14 is a significant milestone in the development of the framework, with performance improvements, streamlined data mutations, and exciting features like Partial Prerendering. Whether you're a seasoned developer or just starting your journey with Next.js, these updates offer new tools and possibilities to explore. Keep an eye on the official Next.js website for more detailed documentation and examples.

Stay tuned for more updates and happy coding with Next.js!

Check React Vs NextJS