Upgrading to Next.js 14

About a year after the release of Next.js version 13, the Vercel team has 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.

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

Step 1: Update Node Version

Before upgrading to Next.js 14, ensure that you are using Node version 18.7 or higher. You can check your current node version by executing the following command in the terminal:

node --version

If your version is older than 18.7, you can use Node Version Manager (NVM) to install the latest version. Once installed, download the latest version of Node using:

nvm install node

Step 2: Upgrade to Next.js 14

Assuming you are using npm as your package manager, you may use the following command to upgrade to the latest version of Next.js:

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

If you are using TypeScript, don't forget to upgrade the corresponding type definitions:

npm i @types/react@latest @types/react-dom@latest

Step 3: Fix the Breaking Changes

After upgrading, it's time to address any breaking changes. Run your project and take note of the errors that appear. They will likely be associated with the breaking changes introduced in Next.js 14, as covered in the previous section. For upgrading, there are codemods available that will automatically update your codebase.

Bonus: Partial Prerendering (Preview)

One of the exciting additions in Next.js 14 is the prospect of Partial Prerendering. It introduces a blend of static initial responses and streaming dynamic content 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 intoa 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.

Final Thoughts

Web development evolves constantly, with 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. It is not mandatory to upgrade immediately, but exploring the advancements and potential benefits that Next.js 14 offers for your specific project's needs and future growth is highly recommended. For more details, refer to the complete blog post on BlueSockets.