Vercel Ship & Next.js 15: Features & Migration Guide

The recent Vercel Ship event has created quite a buzz. Here's a rundown of the highlights. Also, Check out this great video from Theo.

You can also watch the full event here

But to save you some time, here is the rundown. Let's look at all the highlights; at the end, we will migrate a Next.js 14 project to Next.js 15 using the Strapi Starter Template as an example.

What is New?

Vercel's New Firewall: A Long-Awaited Addition

Vercel has finally introduced a firewall, an essential feature many developers have anticipated. Historically, many have relied on Cloudflare to handle DDoS attacks and other security threats.

With Vercel's new firewall, the process of setting up rules to protect your websites is now a breeze. This not only enhances security, but also empowers you to manage costs more effectively, making it a valuable addition to your web development toolkit.

Rethinking Feature Flags: Security and Efficiency

Another significant update involves Vercel's approach to feature flags. They highlighted Jane Wong's contributions to the tech community, noting how she often discovers unannounced features through exposed flags.

Vercel is now integrating feature flags more securely on the server side to prevent such leaks.

This move enhances security by keeping potential features hidden from prying eyes and ensuring a smoother, more controlled rollout process.

The event's primary focus was the Next.js 15 Release Candidate (RC). Despite being labeled an RC due to its dependency on the yet-to-be-released React 19, it's packed with exciting new features.

Next.js 15: Overview of the New Features

The release of Next.js 15 has brought many new features and improvements, all designed to optimize application performance. These enhancements are a testament to our commitment to delivering high-quality products that meet the needs of our users.

1. Support for React 19 RC

Next.js 15 now supports React 19 RC, bringing new client and server component features.

This integration allows developers to utilize the latest advancements in React, such as Actions and the experimental React Compiler.

The React Compiler is designed to reduce the need for manual memoization, simplify code maintenance, and reduce errors.

2. React Compiler (Experimental)

The React Compiler is a new experimental feature that aims to optimize your code automatically.

By understanding plain JavaScript semantics and the rules of React, the compiler can add optimizations without requiring extensive manual intervention.

3. Improved Hydration Error Messages

Many developers have experienced hydration errors. Next.js 15 introduces enhanced error messages that provide more detailed information and suggestions for resolving issues.

These improvements simplify debugging, helping you quickly identify and fix discrepancies between server and client-rendered content.

4. Caching Updates

Caching has undergone significant changes in Next.js 15:

• Fetch Requests By default, fetch requests are no longer cached. Previously, fetch requests used the force-cache option by default, leading to potential issues with outdated data. Now, fetch requests use the no-store option unless explicitly configured otherwise.

• GET Route Handlers GET route handlers are no longer cached by default. You can opt into caching using the static route config option.

• Client Router Cache Page components are no longer cached by default, ensuring that navigation always reflects the latest data.

  These changes address community feedback and aim to make caching behavior more predictable and manageable.

• Partial Prerendering (Experimental) Partial Prerendering (PPR) allows you to combine static and dynamic rendering on the same page.

  This feature can significantly improve load times by immediately serving a static HTML shell and rendering dynamic parts asynchronously.

5. Next/after API (Experimental)

The next/after API allows you to execute code after a response has finished streaming.

This feature is ideal for logging, analytics, and external system synchronization tasks, which should not block the primary response.

6. Create-Next-App Updates

The create-next-app command has received a significant overhaul. The new design provides a cleaner starting point, and the introduction of the --turbo flag simplifies enabling Turbopack for local development.

Additionally, the --empty flag creates a minimal "hello world" page, removing extraneous files and styles.

7. Optimizing Bundling of External Packages

Next.js 15 introduces new configuration options to optimize the bundling of external packages.

External packages are bundled by default in the App Router. Using the transpilePackages option, you can specify which packages to bundle in the Pages Router. This optimization can improve your application's cold start performance by reducing the number of network requests needed to load dependencies.

Next.js 15 brings a wealth of new features and improvements designed to streamline development workflows and enhance application performance.

As these features move from experimental to stable, they will undoubtedly make Next.js an even more powerful tool for building modern web applications.

How to Migrate Your Next.js 14 Project To Next.js 15

Step 1: Clone Starter Project

In this example, we will be using our Next.js & Strapi project. You can find it here. Now, follow along.

You can follow the this README.md file to set up the project locally.

Once you have the project set up, we can move to the next step. Which is the upgrade. You can get the outline for the steps here.

Step 2: Create a New Branch

Since Next.js 15 is still in GA, we will make this change in a new branch.

We will create and switch to the new branch with the following command.

git checkout -b next-15-update

Before making the changes, make sure that the project works as expected.

Step 3: Start Migration

To start the migration, we will run the following command using yarn.

yarn add next@rc react@rc react-dom@rc eslint-config-next@rc

This will install all the necessary dependencies.

Step 4: Update TypeScript Types

Next, since we are using TypeScript in this project, we will update the types with the following.

yarn add @types/react @types/react-dom 

Step 5: Restart Project

Now, after we restart our project, we should see the following.

▲ Next.js 15.0.0-rc.0
- Local:        http://localhost:3000
- Environments: .env

✓ Starting...

Nice! We are now running Next.js 15. The main change is that now we need to "opt in" in to caching. You can learn more about it here. We will push the changes to the repo, you should be able to find it here.

Thanks for your time, and we will see you in the next post.