What’s New in Next.js 14?

Hey there! Just caught the Next.js Keynote online and, let me tell you, it’s a game-changer. I’m stoked to give you the quick and dirty rundown of what’s new and why it matters.

No fluff, just the good stuff.

Ready? Let’s jump in!

Turbopack: A New Engine for Speed

Let’s cut straight to the chase.

Next.js 14 introduces Turbopack, a Rust-based engine that boosts your local development like never before.

next dev --turbo

It’s not just hype; the data proves it. You can look forward to a 53% faster local server startup and a 94% speedier code update with Fast Refresh.

Imagine getting all these performance benefits without changing a single line of code in your existing Next.js project!

Server Actions: Streamlining Data Mutations

Ever thought of triggering server-side code without the need for a dedicated API route?

Next.js 14 brings Server Actions into a stable release.

It’s a game-changer for the developer experience. Now, with just a function defined in your React component, you can perform actions on the server securely.

Here’s a simplified example:

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>
  );
}

This not only simplifies your code but also enhances the user experience by reducing the number of network roundtrips needed for mutating data and re-rendering the page.

Partial Prerendering: The Best of Both Worlds

Partial Prerendering is in preview, but it’s already exciting.

With the ongoing debate between SSR and SSG, Next.js has decided to bring you the benefits of both worlds.

It provides a fast initial static response while streaming dynamic content based on your React Suspense boundaries. So, you get the performance of static sites and the dynamism of server-rendered apps.

Again, no new APIs to learn!

Metadata and Other Under-the-Hood Changes

Metadata options like viewport, colorScheme, and themeColor have been revamped to improve the initial rendering experience and reduce layout shift.

Also, Next.js 14 has new deprecations and breaking changes to watch out for, such as the minimum Node.js version being raised to 18.17 and some API modifications.

Next.js Learn: Your Free Learning Hub

Last but not least, Next.js 14 comes with a refreshed and updated free course on Next.js Learn. From basics to advanced features like Partial Prerendering, it’s a complete resource to level up your Next.js skills.

Wrapping It Up

And there you have it — that’s the news from the Next.js front!

I hope this quick read has been insightful for you. Feel free to dive into the comments to discuss these fresh updates.

For a more in-depth look at each point, make sure to check out the Next.js team’s official blog post: Next.js 14 Details.

Catch you in the next one!

And to see the keynote:

EDIT (2023–10–27): Today, I stumbled upon a crucial article from the Next.js official blog, which was actually published before this post. The article delves into the security considerations of React Server Components (RSC), providing answers to many questions related to the execution of server-side code directly within a component. It’s a valuable resource for understanding how to securely implement server actions. Make sure to give it a read here.

Enjoyed the read? For more on Web Development, JavaScript, Next.js, Cybersecurity, and Blockchain, check out my other articles here:

If you have questions or feedback, don’t hesitate to reach out at [email protected] or in the comments section.

[Disclosure: Every article I pen is a fusion of my ideas and the supportive capabilities of artificial intelligence. While AI assists in refining and elaborating, the core thoughts and concepts stem from my perspective and knowledge. To know more about my creative process, read this article.]

In Plain English

Thank you for being a part of our community! Before you go:

• Be sure to clap and follow the writer! 👏
• You can find even more content at PlainEnglish.io 🚀
• Sign up for our free weekly newsletter. 🗞️
• Follow us: Twitter(X), LinkedIn, YouTube, Discord.
• Check out our other platforms: Stackademic, CoFeed, Venture.