Upgrading from Next.js 13 to Next.js 14

Share with a friend:

Only about a year after the release of Next.js version 13, the Vercel team introduced version 14. You might be wondering, ‘What new APIs or features will I have to learn?’ The answer is none. No new APIs were introduced. Instead, Next.js was enhanced to be better and faster. In this article, we will explore whether upgrading to Next.js 14 is worth it.

Table of Contents

The Evolution: Next.js 13 to Next.js 14

To understand the significance of this upgrade, let’s compare Next.js 13 with its latest iteration, Next.js 14.

Next.js 13 Recap

Next.js 13 introduced various features enhancing performance, security, and developer experience. Highlights include a new /app directory for improved routing, Turbopack (a successor to Wepback), improved font, image and link components, and more. No doubt the most fundamental shift was the change to Server Components, a React 18 feature, as the default for components created in the /app directory. This is now paving the way for Server Actions, a way to interact with your backend without manually creating an API route, to be more widely adopted. If you are still unfamiliar with or not fully caught up with all the changes made in Next.js 13, you may find this article useful.

Next.js 14 Unveiled

In contrast, Next.js 14 does not introduce any new APIs and only has minor breaking changes. It amplifies these advancements made in Next.js 13. Server Actions are now stable and notably, Turbopack, the Rust-based compiler, has undergone rigorous testing resulting in a faster local server startup and code update speed with Fast Refresh.

What’s New in Next.js 14

Faster Turbopack: For a more in-depth look at Turbopack and how to utilize it, visit this article.

Server Actions are stable: The introduction of Stable Server Actions simplifies backend integration by enabling direct function calls from React components, bypassing the need for separate API routes.
Partial Rendering is in preview: Compiler optimization for dynamic content with rapid initial static responses; streamlining rendering complexities without the need to learn new APIs. More on this later.
Official free Next.js course was released: A comprehensive course covering diverse aspects of Next.js, catering to developers’ needs. Visit course.

To learn more about these changes you can visit the official release notes for version 14.

Breaking Changes

@next/font has been changed to next/font.
ImageResponse import has been changed from next/server to next/og.

WASM Target for next-swc has been removed.
next export is now deprecated. Use output: 'export'. Learn more here.
The minimum Node version required is now 18.7.

Official source here.

Should You Upgrade to Next.js 14?

It is not mandatory to upgrade immediately. However, it is highly recommended
to explore the advancements and potential benefits that Next.js 14 offers for your specific project’s needs and future growth. If your project stands to gain from enhanced performance and scalability and streamlined backend integrations, then you should definitely upgrade. If your project is already at version 13, then it also makes sense to upgrade as it is mostly a matter of upgrading dependencies and updating imports.

Step-by-Step: Upgrading from Next.js 13 to 14

Step 1: Update Node Version

You can check your current node version by executing this command in the terminal:

node --version

The minimum node version required is now 18.7. If your version is older than this you can use Node Version Manager (NVM) to install the latest version for your project, package managers like Homebrew (Mac) or Chocolatey (Windows) or you can download the latest version directly from the website. Out of these options, NVM is the most convenient. It allows you to manage multiple node versions and switch between them for different projects. Here is an installation guide. Once installed you can download the latest version of Node using:

nvm install node

Step 2: Upgrade to Next.js 14

Assuming you are using the popular package manager node npm, you may use:

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

Optional: If you are using Typescript you must also upgrade @types/react and @types/react-dom.

npm i @types/react@latest

npm i @types/react-dom@latest

Step 3: Fix the Breaking Changes

Now that you have upgraded, it is time to fix any breaking changes. Run your project and take note of the errors that appear. They will likely all be associated with the breaking changes introduced in Next 14 (as covered in the previous section). For upgrading, there are codemods available that will automatically update your codebase.

Bonus: Partial Prerendering (Preview)

In Next.js 14, one of the exciting additions is the enticing prospect of Partial Prerendering. It introduces a blend of static initial responses and streaming dynamic content—all without requiring the need to learn a new API. Partial Prerendering leverages React Suspense.

As of the time of writing this article, Partial prerendering is under active development.

Let’s delve into a snippet showcasing how Partial Prerendering operates within a Next.js project:

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

By defining Suspense boundaries, the page generates a static shell during the initial load based on these boundaries. The React Suspense fallbacks are prerendered within this shell.

Dynamic Loading without Extra Network Roundtrips

The magic of Partial Prerendering unfolds when a request is initiated—the static HTML shell is promptly served. However, as the application detects dynamic components like <ShoppingCart /> requiring user-specific data, these components are streamed in the same HTTP request as the static shell. Importantly, no additional network roundtrips are necessitated, optimizing performance and ensuring swift, personalized user experiences.

Final Thoughts

Web development evolves constantly, each upgrade unlocking new possibilities. Next.js 14 offers turbocharged performance, simplified backend actions, and a peek into future rendering. However, upgrading should align with your project’s unique needs and growth plans.