NextJS 14: A Closer Look at the Latest Enhancements and Announcements

NextJS 14 was announced at the NextJS conf and released at the same time. It brings a lot of changes but most of them are not new features.
Let’s take a quick look.

Turbopack

Most significant work was done to move the compiler to Turbopack. Tubopack is the underlying Rust engine used to run your NextJS application.
According to the numbers provided by Vercel, we get up to 53.3% faster local server startup (personally I have seen over 60% faster startup) and up to 94.7% faster code updates with fast refresh. To use it locally run next dev --turbo

The work is not 100% complete so the flag is still needed to use it but Vercel says it will move to default when they can run 100% of their internal tests successfully. You can follow the progress at https://areweturboyet.com/

Server Actions

Server Actions has been move to “stable” and you are now encourage to use them. The idea behind server action is that you can call a function instead of an API route. To use it, you can create the function in a file with "user server" or add it in the function itself - even from a Client Component.
Here is an 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>
  );
}

Server Actions are deeply integrated into the entire App Router model so you can:

• Revalidate cached data with revalidatePath() or revalidateTag()

• Redirect to a different route with redirect()

• Send and read cookies through cookies()

• Handle optimistic UI updates with useOptimistic()

• Catch and display server errors with useFormState()

• Display loading states on the client with useFormStatus()

Partial Prerendering

This feature is still in preview so you might find some bugs with it.
The idea behind it is to provide speed of static rendering but support fully dynamic response. It is built on the React <Suspense />. Here is an example:

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

With partial rendering enabled, this page generates a static shell based on the <Suspense /> boundaries. The fallback is pre-rendered then replace with dynamic components, like reading cookies to determine the cart.It is still under active development and will be coming soon in a minor release.

NextJS Learn

Vercel has now created a full set of courses to teach users how to learn NextJS. Fully available for free at https://nextjs.org/learn.
You can find everything from Router, Styling with Tailwind CSS, Optimizing Font and Images, Layout, Pages, Navigation, DB setup, Streaming, Error handling and more...

Other

There are other smaller changes worth mentioning:

• some deprecations and addition to the Metadata API where some elements are moved from string to objects

• minimal Node version is now 18.17

• some imports have moved

Conclusion

This was a large effort provided by around to 500 contributers so, even if the feature set is not very large, there is a lot of improvements that we don’t see.
After some limited testing, I can say that it is very stable and I like those Server Actions a lot and, most importantly, upgrade from later v13 to v14 has been without issues for me. Note that all my upgrades where from applications running on 13.4+ with App Router.

Thanks for reading.