Next.js 15 is here with a bunch of new features and improvements to make building web applications easier and faster. The updates includes support for the latest React 19 RC, better caching methods, and other tools that help both the client and server sides of your apps. In this article, we will explore the key upgrades in Next.js 15, so you can make the most out of them in your projects.
React 19 RC Support:
Next.js 15 RC now supports React 19 RC. This includes new features for both the client and server. One of the new features in React 19 is Actions, which is a common use case in React apps to perform a data mutation and then update state in response. React 19 RC brings a lot of improvements to make your apps run faster and your code easier to manage.
For Example: When a user submits a form to change their name, you will make an API request, and then handle the response.
React Compiler (Expermiental)
The React Compiler is a new experimental compiler created by the React team at Meta. The compiler understands your code at a deep level through its understanding of plain JavaScript semantics and the Rules of React, which allows it to add automatic optimizations to your code.
The compiler reduces the amount of manual memoization developers have to do through APIs such as useMemo and useCallback – making code simpler, easier to maintain, and less error prone.
Improved Hydration Error Handling
Next.js 15 continues to build on those by adding an improved hydration error view. Hydration errors now display the source code of the error with suggestions on how to address the issue.
These improvements can help developers better understand and fix hydration errors in their applications.
Caching Updates
In Next.js 15, the caching default for fetch requests, GET Route Handlers, and Client Router Cache has changed from cached by default to uncached by default.
If you want to retain the previous behavior, you can continue to opt-into caching. Developers can still opt into caching with more explicit configurations like force-cache and no-store options.
Partial Prerendering (Experimental)
Partial Prerendering (PPR) is a rendering strategy that combines the benefits of static and dynamic rendering on the same route. With PPR, you can wrap any dynamic components in a Suspense boundary.
When a new request comes in, Next.js will immediately serve a static HTML shell from the cache, then render and stream the dynamic parts in the same HTTP request.
The New next/after API
The experimental next/after API lets you run code after a response has finished being sent to the user. This is useful for things like logging and analytics that don’t need to slow down the main response. This way, these extra tasks are done efficiently without affecting the user experience.
Updates to create-next-app
Next.js 15 updates the create-next-app command to be more user-friendly and efficient. The new design asks if you want to enable Turbopack for local development and includes a new --empty flag for creating minimal projects. These changes make it easier and faster for developers to start using Next.js.
Bundling External Packages
A big feature in this release is the improved bundling of external packages. In the App Router, external packages are now bundled automatically, making the app start faster. Developers can choose to exclude specific packages using the serverExternalPackages config option. For the Pages Router, a new bundlePagesRouterDependencies option has been added to match the App Router’s default behavior.
Conclusion
Next.js 15 is packed with features that meet modern web development needs. It includes better React support, advanced caching strategies, and experimental tools that improve performance and developer experience. By using these new features in your projects, you can create faster, easier-to-maintain, and high-performing applications.
Stay tuned for more updates and detailed guides on how to make the most of NextJS 15.