Geoffrey Rekier | 14. november 2024 | Blogginnlegg

Exploring the Power of Next.js 15

Next.js 15 brings major enhancements for developers, including async APIs for handling request-specific data, refined caching defaults, compatibility with React 19, and the stable release of Turbopack for faster builds. New features like the <Form> component, ESLint 9 support, and advanced security measures further improve development speed and application stability. Enhanced debugging for hydration errors, a static route indicator, and support for TypeScript in next.config.ts add additional flexibility. These upgrades make it easier to build high-performance, scalable web apps.

The release of Next.js 15 marks a significant milestone for developers using the popular React-based framework to create highly performant, scalable web applications. With major enhancements in developer experience, server-side rendering, and optimization, this version promises faster performance, more flexibility, and enhanced stability.

Let's explore what makes Next.js 15 stand out, highlighting its new features and benefits and providing practical examples of how these updates can be applied to modern web development.

Upgrade

Next.js includes codemods with every major release to help upgrade the breaking changes. This is an automated code transformation tool. Just run it with npx @next/codemod@canary upgrade latest

The CLI will update your dependencies, show available code mods, and guide you through applying them. It is recommended that you use the canary version.

Key New Features in Next.js 15

Async Request APIs - Breaking Change!

In traditional Server-Side Rendering, the server waits for a request before rendering any content. However, not all components depend on request-specific data, so waiting for the request to render them is unnecessary.

Ideally, the server would prepare as much as possible before a request arrives. We need to know when to wait for the request to enable this and set the stage for future optimizations. Therefore, we are transitioning APIs that rely on request-specific data—such as headers, cookies, params, and searchParams—to be asynchronous.

Cache changes

The App router was launched earlier with aggressive opinionated caching defaults to improve performance. However, Next.js has heard the overwhelming feedback and changed this.

GET requests are not cached by default in the Route handlers.
Client Router no longer caches pages by default.
Next.js fetch and Link no longer caches by default.

All can be configured in the next.config if you want to change the behavior.

React 19

In version 15, the App Router uses the latest RC of React 19, but the Pages Router is still backwards compatible with React 18.

I also confirm that I have tested a small application with the App Router in Next 15.0.1 and React 18.3.1, which works fine.

This upgrade should also improve Hydration error messages. You will now see the DOM tree with the complete HTML tag and its attribute where the error occurred, which should greatly improve debugging those errors.

You will also get an experimental React Compiler, which will help prevent errors and optimize your code. This needs to be enabled in the next.config, and you need to install the babel-plugin-react-compiler.

Turbopack dev

Even though you could use it in earlier versions, Turbopack is now seen as stable and ready. You will now be asked in "create next app" if you want to use Turbopack. Even though it defaults to "No", I have never experienced problems.

To add it (or remove it) to an existing project, just add (or remove) the --turbopack flag to the next dev command.

<Form> Component

A new <Form> component is now available from next/form. It extends the default HTML tag with prefetching, client-side navigation and progressive enhancement. This is useful for a search form that navigates to a new page to show results.

ESLint support update

Following the end-of-life announcement for ESLint 8, Next.js 15 now supports ESLint 9. Backward compatibility to 8 is still maintained to ensure a smooth transition.

Enhanced security to server actions

2 new features will improve security:

Action IDs: Next.js will create non-deterministic IDs to allow the client to reference and call the server action.
Dead code elimination: Server actions not in use will be removed from the bundle. Reducing risk and bundle size.

Also worth noting

Static route indicator

When running the dev server, you will get an indicator that you are on a static route to help you identify them.

After (unstable)

Next.js 15 introduces a new API that allows you to run some code after the browser's response. This might be interesting for logging or analytics. To access it, you must enable it in the next.config.