Upgrading to Next.js 15 in 5 Mins using Codemod

Hey everyone! I’m thrilled to share my experience upgrading a small Next.js project from Next.js 14 to the freshly-released Next.js 15. The official codemod tool (ie npx @next/codemod@canary upgrade) promises to streamline this process, and I couldn’t wait to put it to the test.

If you’re intrigued, I’ve also documented the entire upgrade process in the YouTube video below which you can check out for a visual walkthrough:

Key Features of Next.js 15

Before diving into the upgrade, let's quickly touch on some of the fantastic new features that come with Next.js 15, as detailed in my blog post:

• Support for React 19: Leveraging the latest improvements in React, while retaining backward compatibility with React 18.

• Enhanced CLI and Codemods: The npx @next/codemod@canary upgrade command facilitates smoother and faster upgrades.

• Turbopack Dev (Stable): Significantly faster development experience with up to 96.3% faster code updates.

• Static Route Indicator: Visual distinction between static and dynamic routes for enhanced development clarity.

• Enhanced Forms (next/form): Expanded capabilities with features like prefetching and client-side navigation.

• Executing Code After Response: The new unstable_after API for post-response tasks like logging and analytics.

• New Observability APIs (instrumentation.js): Deep insights into application performance with integrations to popular observability tools.

• Improved TypeScript Support: Enhanced TypeScript support including next.config.ts files.

The Upgrade Process

Here’s a step-by-step recount of how I upgraded my small-scale project—a corporate blog demo—from Next.js 14 to 15:

1. Initial Setup:

   • I fired up the project, which you can see in the video, running perfectly on Next.js 14.

2. Running the Codemod Tool:

   • Enabled Turbo Pack to optimize the build process.

   • Installed the React 19 Code Mod.

   • Accepted all necessary type upgrades.

   The goal was to see how efficiently and quickly this codegen tool could handle the upgrade.

3. Observing the Transformation:

   • The codegen tool seamlessly transformed synchronous functions into asynchronous ones.

   • Applied essential updates to the TSConfig.

   • Handled search parameters with a new async-await pattern.

4. Testing and Debugging:

   • Ran npm start to see the changes in action.

   • Faced a minor issue with a .ICO file format which was easily corrected by renaming it to favicon.png.

   The Turbo Pack really shone here—instead of the previous sluggish load times, pages loaded almost instantaneously!

5. Final Steps:

   • Verified that all pages were functioning flawlessly in the development environment.

   • Committed the changes with a concise message, signifying the successful upgrade.

Video Walkthrough

For those who prefer a visual guide, watch my YouTube video showcasing the entire upgrade process for Wisp's Next.js Corporate Blog Template from start to finish. You'll see just how swift and straightforward this transition can be, even for smaller projects.

What's Next?

This smooth upgrade with the help of the codegen tool has been incredibly enlightening. The benefits of Next.js 15, especially the speed improvements with Turbo Pack, are noteworthy and promising.