Introduction to Next.js 15

Introduction - upgrade to new version

On October 21st 2024 Next.js version 15 was released, and this is something worth looking into if you are a web developer. Although this represents a major new version of Next.js, unlike previous versions ( like 13 or 14 ), version 15 actually does not change too much, but these upgrades are nonetheless extremely important. There is also an official announcement blog post that is worth looking into if you want to upgrade to the latest version. This process of upgrading should be pretty easy and straightforward, because there is a command that you can execute in your existing Next.js projects that should ensure that all important changes are applied to your code automatically.

Source: https://nextjs.org/blog/next-15#smooth-upgrades-with-nextcodemod-cli.

New async functionality

First important subject is the modification of certain functions and API's that are built into Next.js itself. Many of these were synchronous in their requests, and are now actually marked as async. There will be a transition period that will enable developers to use these functions synchronously, like they used to, but in future releases it is going to be mandatory to use them in conjunction with async await, so it won't be possible to use them synchronously once Next.js version 16 is released. If you look at it from that perspective, it is probably better to incorporate this new behavior right now, and be prepared for future release of Next.js.

Source: https://nextjs.org/blog/next-15#async-request-apis-breaking-change.

New default caching policies

Next.js 15 removes some parts of the built-in caching behavior from the previous versions. For example, when using the fetch function in version 15 you're going to send more requests to whichever API you're reaching out to then with previous versions, because the caching can effectively be turned off. This was different due to Next.js 14 different cache policies for this type functionality. In Next.js 14 it was possible to use fetch that do not generate subsequent additional requests that go to the back-end API. This was default behavior, unless you explicitly told Next.js to do it differently. The additional requests were not needed simply because the content that was to be fetched was already cached by the default caching policies. With Next.js 15 this is different and now it is going to send more requests to the back-end, because now there is no caching by default. The cache setting on fetch is now no store by default, and it used to be force cache by default. This is switched now with Next.js 15 but you can still go back to old behavior if you want to, by setting the cache setting on the fetch function to force cache. In addition to the fetch function caching, GET route handlers are no longer cached by default, so if you're exposing an API route in your Next.js app router, the GET request API route is no longer cached by default.

Source: https://nextjs.org/blog/next-15#caching-semantics.

Upcoming React 19 support

Next.js team announced that version 15 is ready to support React 19 ( although React 19 is still not released ). It has been announced that Next.js 15 has experimental support for the React compiler, which was also announced to be released together with the React 19 release. This is hopefully going to optimize performance of Next.js applications in the future. Official documentation provides codemods and automated tools to help the migration process towards React 19.

Source: https://nextjs.org/blog/next-15#react-19.

Turbopack

Turbopack tool is a build tool that gives you faster builds and a faster development server. Next.js with the app router could be pretty slow, so this is a good thing to have in your developer toolbox. Turbopack Dev is now stable and this marks a turning point in Next.js development process, because at some point Turbopack will probably become the default development tool. Faster code updates and faster local server start up is no small thing to have in mind if Next.js framework is your primary choice for web development.

Source: https://nextjs.org/blog/next-15#turbopack-dev.

Static route indicator

Static route indicator ( it is displayed during development ) can help developers understand if route is static or dynamic. Also, it is useful in identifying if ( and when ) a route opts out of static rendering or not. This makes it much easier for developers to debug and optimize their applications.

Source: https://nextjs.org/blog/next-15#static-route-indicator.

Post request code execution and after API

This is a feature that enables Next.js to efficiently execute code, after the server has finished computing the response to a user request. This is something pivotal because sometimes it is essential for the server to performs tasks even after it has computed the response. Example of these type of tasks can be different logging, analytics, or system synchronization functions. These tasks are not directly related to the response itself but sometimes they are essential. Deferring this work poses a challenge for the server, because we have to deliver a response to user without delay, but we also have to take care of other tasks which should not stop computing just because the response has finished. This is where Next.js 15 experimental.after and after API comes into play. It is worth noting that this tool is still experimental, but we can hope that it will soon become stable and default.

Source: https://nextjs.org/blog/next-15#executing-code-after-a-response-with-unstable_after-experimental.

Instrumentation.js file

The instrumentation file along with the register API allows users to monitor performance, track the source of errors and integrate with observability libraries ( OpenTelemetry for example ) in order to collect and export telemetry data. By hooking into the Next.js server life cycle this file also simplifies debugging process and error tracking. This tool is no longer experimental and is now marked as stable, which is great news for future Next.js releases.

Source: https://nextjs.org/blog/next-15#instrumentationjs-stable.

Enhanced Form component

Next.js 15 new Form Component extends the HTML form and it is useful for forms that navigate to a new page with submission results, such as search form that leads to a results page for example. A user will enter a search term and submitting the form will send a get request that will redirect to a different page with that search term passed along with the request. Form Component comes packaged in with default prefetching, so when the form is in view the layout and the loading UI are prefetched making the navigation very fast. In classic form submissions that use a POST requests, like Sign Up forms, Register forms and similar use cases, this component is not useful, and in that case you can use a classic HTML form.

Source: https://nextjs.org/blog/next-15#form-component.

TypeScript support

Let’s now talk typescript support in this version of Next.js. The Next.js config file is now created with a default TypeScript type and this makes working with TypeScript in Next.js a little bit better. This looks like a minor change at first, but as a lot of us knows, TypeScript has practically became a de facto standard in front-end development, so this is actually a bigger improvement than it seems to be at first glance.

Source: https://nextjs.org/blog/next-15#support-for-nextconfigts.

Improvements for self hosting

Next.js is not exactly known as a champion of self hosting solutions. Vercel is making a lot of money from companies and businesses hosting Next.js applications using their infrastructure. These changes seem to be a step in the direction of becoming more flexible in terms of hosting the Next.js app, which is good.

Source: https://nextjs.org/blog/next-15#improvements-for-self-hosting.

Server action security

All of us who have worked at least a little bit with Next.js know about server actions. Those functions that have ‘use server’ directive at the top of the file and that are exporting an async function is what server action essentially is. Although server actions are executed on the server side, all these functions are essentially still a public API, even if they are not imported anywhere else in the code, and this can be a bit of problem ( obviously ). In order to enhance security of server actions Next.js 15 introduces couple of new enhancements, and these are:

• dead code elimination
• secure action ID's

Read more about these in the url provided below.

Source: https://nextjs.org/blog/next-15#enhanced-security-for-server-actions.

External package bundling optimizations

The performance of your web application can significantly be improved by bundling external packages (if you are a Webpack ninja these words will not sound like total garbage). In Next.js 15 bundling in the App Router happens by default, but you can opt-out specific packages. In the Pages router external packages are not bundled by default, but you can provide a list of packages to bundle. Next.js 15 introduces new possibility to unify configuration between App and Pages Router.

Source: https://nextjs.org/blog/next-15#optimizing-bundling-of-external-packages-stable.

ESLint 9 Support

Next.js 15 introduced support for ESLint 9. To ensure a smooth transition, Next.js remain backwards compatible, meaning you can continue using ESLint 8, or you can switch to ESLint 9.

Source: https://nextjs.org/blog/next-15#eslint-9-support.

Development and Build Improvements

HMR

Next.js 15 introduces Hot Module Replacement ( HMR ) that can re-use fetch responses. This is useful with server components because these components are re-executed when saved. This means that HMR is saving requests to API endpoints. This is extremely useful.

Faster Static Generation for the App Router

Static optimization process in Next.js renders pages twice. First to generate data for client-side navigation, and second to render the HTML for the initial page request. Now this process in Next.js 15 reuses the first render, therefore reducing workload and build times.

Advanced Static Generation Control ( experimental )

This is experimental support for more control over the static generation process for advanced use cases.

Source: https://nextjs.org/blog/next-15#development-and-build-improvements.