Next.js 15 Release Candidate Launched: Explore the React Compiler

If you're using Next.js, then Next.js 15 RC is a game-changer. It integrates seamlessly with React 19 RC, unlocking a several new React features for your Next.js application including the powerful React compiler. Let's explore how Next.js 15 RC and React 19 RC work together to enhance your development workflow and optimize performance.

Ease the development process with these new features

• React 19 RC: Next.js 15 RC now supports React 19 RC bringing in new features for both server and client. React compiler is an experimental compiler developed by Meta and it is now supported in Next.js 15 RC. Here's how you can incorporate it in your Next.js 15 project:

Install babel-plugin-react-compiler:

npm install babel-plugin-react-compiler

Then update your next.config.ts file:

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

module.exports = nextConfig;

• Caching Updates: With Next.js 15 the caching default have been changed from cached by default to uncached. If you want caching to be automatically done on every request then you can use the force-cache option.

fetch("API_URL", {cache: 'force-cache' | 'no-store'})

force-cache: fetch a resource from the cache if it is present or fetch from remote server and update it in the cache.

no-store: fetch a resource only from a remote server on every request and don't update the cache.

• Partial Prerendering: PPR is an experimental feature in Next.js 15 RC. It allows you to partially prerender some components or pages on the server while fetching other data dynamically on the client side. This can decrease your initial page render time. Also prerendered content can be indexed by search engines resulting in better SEO. To implement PPR in your Next.js projects you can do the following:

Set the experimental_ppr value to true in your pages:

import { Suspense } from "react"
import { StaticComponent, DynamicComponent } from "@/app/ui"

export const experimental_ppr = true

export default function Page() {
  return {
     <>
         <StaticComponent />
         <Suspense fallback={...}>
             <DynamicComponent />
         </Suspense>
     </>
  };
}

Now set the value of ppr to incremental in next.config.ts file:

const nextConfig = {
    experimental: {
        ppr:'incremental',
    },
};

module.exports = nextConfig;

• Create-next-app updates: New design updates for the create-next-app.

When running create-next-app there is a new prompt asking you if you wish to enable turbopack. --turbo flag has been introduced if you wish to enable turbopack with create-next-app.

npx create-next-app@rc --turbo

A new --empty flag has also been added to the cli that will remove all the additional files and styles and will render a simple helloworld page.

npx create-next-app@rc --empty

Upgrading to Next.js 15

Now let's guide you through the upgrade process so that you can also use these features in your projects.

Run the following command to upgrade to Next.js version 15:

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

Conclusion

By upgrading to Next.js 15 RC you can unlock some exciting new features. While still under development, upgrading allows you to explore its potential. Experiment and keep learning to become a more proficient Next.js developer. Here are some resources where you can learn more about these features:

• Next.js Blog: https://nextjs.org/blog/next-15-rc

• React.js 19 documentation: https://react.dev/blog/2024/04/25/react-19