Technical Enhancements in Next.js 15

nidhinkumarnidhinkumar
3 min read

Next.js 15 comes with significant technical advancements, particularly in caching and routing.

1.Caching Semantics

One of the major changes is the shift from caching GET Route Handlers by default to making them uncached unless explicitly opted-in by developers. This is a huge step towards providing more precise control over caching for improved performance, especially for applications relying heavily on external APIs or dynamic data.

In Next 14, Route Handlers that used the GET HTTP method were cached by default unless they used a dynamic function or dynamic config option. In Next.js 15, GET functions are not cached by default.

You can still opt into caching using a static route config option such as export dynamic = 'force-static'

Client Router Cache no longer caches Page components by default

In Next.js 14.2.0, an experimental staleTimes flag to allow custom configuration of the Router Cache were introduced.

In Next.js 15, this flag still remains accessible, but the default behavior to have a staleTime of 0 for Page segments. This means that as you navigate around your app, the client will always reflect the latest data from the Page component(s) that become active as part of the navigation. However, there are still important behaviors that remain unchanged:

  • Shared layout data won't be refetched from the server to continue to support partial rendering.

  • Back/forward navigation will still restore from cache to ensure the browser can restore scroll position.

  • loading.js will remain cached for 5 minutes (or the value of the staleTimes.static configuration)

2.Executing code after a response with unstable_after (Experimental)

Developers can now choose to make routes static using configuration options like force-static, allowing for finer control over content delivery. Alongside this, the new after() API enables developers to schedule work after a response is streamed, ensuring that tasks such as logging and analytics do not impact the user experience.

To use it, add experimental.after to next.config.js

const nextConfig = {
  experimental: {
    after: true,
  },
};

export default nextConfig;

Then, import the function in Server Components, Server Actions, Route Handlers, or Middleware.

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';

export default function Layout({ children }) {
  // Secondary task
  after(() => {
    log();
  });

  // Primary task
  return <>{children}</>;
}

3.Hydration error improvements

Next.js 15 brings improved error messages for easier debugging.Hydration errors now display the source code of the error with suggestions on how to address the issue.

4.ESLint 9 support

The new version fully supports ESLint 9, helping developers maintain code quality while making migration from older versions smoother.

To ensure a smooth transition, Next.js remain backwards compatible, meaning you can continue using either ESLint 8 or 9.

If you upgrade to ESLint 9, and if you haven't yet adopted the new config format, Next.js will automatically apply the ESLINT_USE_FLAT_CONFIG=false escape hatch to ease migration.

Additionally, deprecated options like —ext and —ignore-path will be removed when running next lint.

End Notes

Next.js 15’s technical innovations, from enhanced caching control to powerful new APIs like after(), provide developers with the flexibility and performance optimizations necessary for modern web applications. These changes allow for smarter, faster, and more reliable applications, making Next.js 15 a future-proof choice for developers.

0
Subscribe to my newsletter

Read articles from nidhinkumar directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

nidhinkumar
nidhinkumar