Next.js 15: Even faster, even better

Next.js 15 brings many exciting new features that improve both the Performance as well as the Developer Experience significantly. From super-fast builds to new functions - here is an overview of the most important updates:

Super-fast turbo pack

Turbopack revolutionizes the development process with significantly faster builds. Turbopack offers significant speed advantages compared to Webpack. Based on the performance measurements at vercel.coma large Next.js application, the following improvements were observed:

76.7% faster when starting the local server.
96.3% faster for code updates with Fast Refresh.
45.8% faster when compiling the first route without caching.

In particular, these improvements speed up development cycles and increase productivity. You can activate Turbopack in your project:

{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start"
  }
}

Improved caching strategies

Next.js 15 brings important changes to the caching logic:

GET Route Handlers are no longer cached by default, which ensures that up-to-date data is always delivered. If you want to explicitly specify that a route is generated statically, you can control the caching with the following code:

export const dynamic = 'force-static';

In addition fetch()-requests are no longer cached automatically. Developers must explicitly specify when the cache is updated. This can be done with the revalidate-parameter:

fetch('https://example.com/api/data', { 
  next: { revalidate: 30 } // Cache wird alle 30 Sekunden aktualisiert
});

These changes provide more control over the cache and help to avoid outdated data.

New form component for simple and secure forms

The new Form component simplifies the creation and management of forms and offers numerous advantages:

Prefetching (loading in advance)As soon as the form enters the user's visible area, the layout and loading UI are loaded in advance to make navigation faster and smoother.
Seamless client-side navigationSplit layouts and the client-side state are retained when the form is submitted, providing a better user experience.
Progressive enhancementIf JavaScript is not loaded, the form still works via a complete page navigation.

In addition, the Server Actionswhich are also used by the forms. Thanks to Secure Action IDs Next.js now creates non-deterministic IDs that are recalculated with each build, which increases security.

Here is an example of the use of the new Form component:

import Form from 'next/form';

export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}

This component makes it easier to develop forms that require server-side processing without complex client-side code, while providing advanced security features.

next/after API: Complete tasks after the response

The next/after API, currently still unstableallows non-blocking tasks such as logging or analytics to be executed after the response has been sent to the client. This improves performance and the user experience:

import { unstable_after as after } from 'next/server';

export default function Page() {
  after(() => {
    console.log('Logging nach dem Übermitteln der Antwort');
  });

  return <div>Page content</div>;
}

This API is useful for efficiently completing downstream tasks without slowing down the main request.

Hydration error improvements

Next.js 15 improves the handling of Hydration Errors significant. These errors occur when the server-side and client-side states of a page do not match. The new, more precise error messages help developers to diagnose and rectify problems more quickly, which makes the Developer Experience improved.

TypeScript support for `next.config.ts`

With Next.js 15 you can use the next.config.ts file (finally 😉) completely in TypeScript write. This improves error detection and type checking in your configuration file, which leads to better maintainability. Here is an example:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  // Konfigurationen 
};

export default nextConfig;

Async Request APIs

One breaking change in Next.js 15 concerns the Async Request APIs. These APIs have been converted from synchronous to asynchronous. This means that existing projects must be adapted in order to remain compatible. Here is a code example for using the new asynchronous cookies() API:

import { cookies } from 'next/headers';
 
export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
 
  // ...
}

This change enables a more flexible and efficient handling of requests and responses in Next.js.

Tip at the end: Codemod for simple upgrades

Next.js provides the Codemod CLI tool is available to help with the migration of old APIs to the latest versions. This tool can make the migration process much easier, especially for major changes such as the new Async Request APIs: