Next.js 15 RC Launched: A Preview of the Future in Web Development

Next.js 15 Release Candidate (RC) is here, opening its doors to developers keen on exploring the latest advancements before the general availability release. This exciting phase enables early testing and feedback, helping to fine-tune the final version. In this post, we'll dive into the new features and enhancements packed within Next.js 15, their benefits, and how the Vercel Ship Breakdown can aid developers in understanding these updates.

Overview of New Features and Improvements

1. React 19 RC Support

Next.js 15 RC now supports React 19 RC, which brings cutting-edge features to both client and server environments. This includes the introduction of Actions—a powerful new way to handle side effects in a more structured manner.

2. React Compiler (Experimental)

A novel addition is the experimental React Compiler, poised to add automatic optimizations, making code maintenance simpler and reducing manual memoization.

Example:

npm install babel-plugin-react-compiler

In your next.config.js:

const nextConfig = {
  experimental: { reactCompiler: true },
};
 
module.exports = nextConfig;

3. Hydration Error Improvements

Next.js 15 continues improving hydration error handling, providing clearer error messages with actionable suggestions.

4. Changes in Caching Defaults

Modifications in caching behavior ensure more granular control, reducing default caching for fetch requests, GET route handlers, and client navigations.

Example:

fetch('https://api.example.com/data', { cache: 'no-store' });

5. Partial Prerendering (Experimental)

Partial Prerendering (PPR) allows a mix of static and dynamic content on the same page, facilitating incremental adoption and smoother user experiences.

Example:

import { Suspense } from "react";
import { StaticComponent, DynamicComponent } from "@/app/ui";
 
export const experimental_ppr = true;
 
export default function Page() {
  return (
    <>
      <StaticComponent />
      <Suspense fallback={<div>Loading...</div>}>
        <DynamicComponent />
      </Suspense>
    </>
  );
}

6. Next/After API (Experimental)

The next/after API lets you execute code after a response has finished, ideal for non-blocking tasks such as logging or analytics.

Example:

import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';
 
export default function Layout({ children }) {
  after(() => {
    log();
  });
 
  return <>{children}</>;
}

7. Bundling External Packages

Enhanced options for bundling external packages streamline the performance on startup, particularly for server-side rendering.

Example:

const nextConfig = {
  bundlePagesRouterDependencies: true,
  serverExternalPackages: ['package-name'],
};
 
module.exports = nextConfig;

How the Vercel Ship Breakdown Can Help

To help developers navigate these changes, Vercel provides an in-depth Ship Breakdown for every major release. This breakdown offers detailed documentation, upgrade guides, and real-world examples to facilitate the transition to Next.js 15. The Next.js documentation repository also includes specific sections for new APIs and features.

Learn more at Next.js 15 RC Documentation

Real-World Impact and Examples

The new features in Next.js 15 RC aren't just theoretical; they have practical impacts that can enhance application performance and developer efficiency. For instance, consider a large-scale e-commerce application that leverages the new caching controls and PPR to deliver dynamic product pages faster than ever, maintaining up-to-date inventory and pricing data without sacrificing speed.

Conclusion

The future of web development is evolving with Next.js 15 RC. Don't miss out on these cutting-edge features. Start experimenting today and provide your valuable feedback to shape the final release.

Try Next.js 15 RC today:

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

Visit the Next.js 15 RC documentation for more information: rc.nextjs.org/docs

Authors: Delba de Oliveira and Zack Tanner

Now is the time to dive in, explore, and shape the future of the Next.js ecosystem! Happy coding!

References:

• Next.js 15 RC Launched: A Preview of the Future in Web Development by Delba de Oliveira and Zack Tanner