website-logomedCode

"NEXT.JS 15 : Discover the Latest Next.js Version: What's New?

Curious about the latest Next.js version? Learn about new features, improvements, and why it matters for developers!...
MOHAMMED DAKIR| April 7, 2024
next.js
"NEXT.JS 15 : Discover the Latest Next.js Version: What's New?
Share

Next.js #vercel #DEV #SSR

The highly anticipated Next.js 15 Release Candidate (RC) has been unveiled, providing developers with an opportunity to experiment with the latest innovations before the stable release. This early access version introduces a host of new features and improvements designed to enhance the development experience. Let's dive into the key updates in Next.js 15 RC.

React 19 RC Support and Improvements

Next.js 15 RC brings full support for React 19 RC, including the new React Compiler, which is currently in an experimental phase. This integration promises significant performance enhancements and more efficient hydration error handling. By leveraging these updates, developers can expect smoother and faster React applications, paving the way for more dynamic and responsive user experiences.

Enhanced Caching Mechanisms

In this release, Next.js has revamped its caching strategies. Fetch requests, GET route handlers, and client-side navigations are no longer cached by default. This change ensures that the data served is always fresh, reducing the chances of displaying outdated information to users. It offers developers more control over caching behaviors, allowing for more precise optimization of application performance.

Partial Prerendering: A New Approach

One of the experimental features in Next.js 15 RC is Partial Prerendering. This feature introduces a new layout and page configuration option aimed at incremental adoption. With Partial Prerendering, developers can selectively prerender parts of their application, improving load times and performance for specific sections without the need to fully prerender the entire application. This approach offers a balanced solution between static and dynamic content rendering.

Introducing next/after API

The new next/after API, another experimental feature in Next.js 15 RC, enables developers to execute code after a response has finished streaming. This addition provides more flexibility in handling post-response logic, allowing for cleaner and more efficient code management. It opens up possibilities for post-streaming tasks such as analytics logging, resource cleanup, or additional data fetching.

Updated create-next-app and Turbopack

The create-next-app tool has received a significant design update, making it more intuitive and user-friendly. Additionally, a new flag has been introduced to enable Turbopack during local development. Turbopack is a high-performance JavaScript bundler designed to replace Webpack, offering faster build times and improved development workflow. This update simplifies the setup process and enhances the overall development experience.

Stable Bundling of External Packages

Next.js 15 RC also includes stable updates to the configuration options for bundling external packages. Both the App and Pages Router configurations now support more flexible and robust bundling options. These improvements help streamline the process of integrating third-party libraries and modules, ensuring that applications remain modular and maintainable.

Try the Next.js 15 RC today:

npm install next@rc react@rc react-dom@rc\n

React Compiler (Experimental)

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.

With Next.js 15, we've added support for the React Compiler

Install babel-plugin-react-compiler:

npm install babel-plugin-react-compiler

npm install babel-plugin-react-compiler\n

Then, add experimental.reactCompiler option in next.config.js:

const nextConfig = {\n experimental: {\n  reactCompiler: true,\n },\n};\n \nmodule.exports = nextConfig;\n

Optionally, you can configure the compiler to run in \"opt-in\" mode as follows:

const nextConfig = {\n experimental: {\n  reactCompiler: {\n   compilationMode: 'annotation',\n  },\n },\n};\n \nmodule.exports = nextConfig;\n

Hydration error improvements

Next.js 14.1 made improvements to error messages and hydration errors. 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.

For example, this was a previous hydration error message in Next.js 14.1:


Next.js 15 RC has improved this to:


Next.js 15: A Comprehensive Guide to New Caching Updates

Next.js has always been at the forefront of web development, providing powerful tools and efficient defaults for developers. With the release of Next.js 15, significant changes have been introduced, particularly in how caching is handled. This article will delve into these updates, explaining their implications and how developers can adapt to these changes for optimal performance.

Understanding Next.js 15 Caching Updates

Next.js 15 brings a pivotal shift in caching strategies, aiming to enhance performance while offering greater flexibility. The App Router now comes with new caching defaults designed to provide the most efficient option out of the box, with the ability to customize as needed.

fetch('https://...', { cache: 'force-cache' | 'no-store' })\n
  • no-store - fetch a resource from a remote server on every request and do not update the cache
  • force-cache - fetch a resource from the cache (if it exists) or a remote server and update the cache

Incremental adoption of Partial Prerendering (Experimental)

Partial Prerendering (PPR) allows developers to combine static and dynamic content on a single page. This method enhances performance by delivering a static HTML shell quickly while dynamically rendering specific components as needed. The result is a faster initial load time and a more interactive user experience.

Default Static Rendering in Next.js

Next.js defaults to static rendering, which is highly efficient for pages that don’t require frequent updates. However, when dynamic functions such as cookies(), headers(), or uncached data requests are used, the entire route switches to dynamic rendering. This can be beneficial for certain use cases but may not always be necessary for the entire page.

How Partial Prerendering Works

With PPR, developers can wrap dynamic UI elements within a Suspense boundary. When a new request is made, Next.js serves the static HTML shell immediately, providing a quick initial load. Concurrently, it renders and streams the dynamic parts of the page within the same HTTP request. This approach ensures that users see the content faster while still benefiting from dynamic updates where needed.

Incremental Adoption with experimental_ppr

To facilitate a smooth transition and allow for incremental adoption of PPR, Next.js introduces the experimental_ppr route config option. This option enables developers to opt specific layouts and pages into Partial Prerendering, giving them control over which parts of their application use this new optimization.


To allow for incremental adoption, we’ve added an experimental_ppr route config option for opting specific Layouts and Pages into PPR:

import { Suspense } from \"react\"\nimport { StaticComponent, DynamicComponent } from \"@/app/ui\"\n \nexport const experimental_ppr = true\n \nexport default function Page() {\n return {\n   <>\n\t   <StaticComponent />\n\t   <Suspense fallback={...}>\n\t\t   <DynamicComponent />\n\t   </Suspense>\n   </>\n };\n}\n

To use the new option, you’ll need to set the experimental.ppr config in your next.config.js file to 'incremental':

const nextConfig = {\n experimental: {\n  ppr: 'incremental',\n },\n};\n \nmodule.exports = nextConfig;\n

Once all the segments have PPR enabled, it’ll be considered safe for you to set the ppr value to true, and enable it for the entire app and all future routes.

We will share more about our PPR roadmap in our Next.js 15 GA blog post.

Executing code after a response with next/after (Experimental):

When processing a user request, the server typically performs tasks directly related to computing the response. However, you may need to perform tasks such as logging, analytics, and other external system synchronization.

Since these tasks are not directly related to the response, the user should not have to wait for them to complete. Deferring the work after responding to the user poses a challenge because serverless functions stop computation immediately after the response is closed.

after() is a new experimental API that solves this problem by allowing you to schedule work to be processed after the response has finished streaming, enabling secondary tasks to run without blocking the primary response.

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

const nextConfig = {\n experimental: {\n  after: true,\n },\n};\n \nmodule.exports = nextConfig;\n

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

import { unstable_after as after } from 'next/server';\nimport { log } from '@/app/utils';\n \nexport default function Layout({ children }) {\n // Secondary task\n after(() => {\n  log();\n });\n \n // Primary task\n return <>{children}</>;\n}\n

Conclusion

The Next.js 15 Release Candidate is packed with new features and enhancements that promise to elevate the development experience. From advanced React 19 RC support to innovative caching mechanisms and partial prerendering, this release offers a glimpse into the future of web development with Next.js. Developers are encouraged to explore these updates and provide feedback to help shape the final stable release.

Embrace the cutting-edge capabilities of Next.js 15 RC and start experimenting with these exciting new features today. Whether you're optimizing your application's performance, improving user experience, or streamlining your development workflow, Next.js 15 RC has the tools to help you succeed.

This website uses cookies to enhance your browsing experience, analyze site traffic, and serve better user experiences. By continuing to use this site, you consent to our use of cookies. Learn more in our cookie policy

Explore the latest insights, articles,free components, and expert advice on programming and software development

© Copyright 2024 MED DAKIR. All rights reserved./privacy policy