Exciting News: Next.js 15 Release Candidate is Here!
Tags: javascript, webdev, tutorial, programming
Published: 2024-07-07 19:51:52



**Posted by:**
- **Delba de Oliveira** (@delba_oliveira)
- **Zack Tanner** (@zt1072)

---

### New Features and Updates

The Next.js 15 Release Candidate (RC) is now available for early adopters to explore and provide feedback on the latest enhancements before the official release.

#### **React 19 RC Integration**
- **Support for React 19 RC:** Now, you can leverage the latest features of React 19, including Actions, for both client and server-side operations.
- **React Compiler (Experimental):** A new experimental compiler from Meta, reducing the need for manual optimizations like `useMemo` and `useCallback`.

#### **Enhanced Caching Mechanisms**
- **Caching Updates:** Fetch requests, GET route handlers, and client navigations are no longer cached by default, enhancing dynamic data handling.
- **Fine-Grained Control:** Easily opt into caching where necessary, ensuring optimal performance.

#### **Partial Prerendering (Experimental)**
- **Incremental Adoption:** A new layout and page config option allows for gradual adoption of Partial Prerendering, blending static and dynamic rendering seamlessly.

#### **Next/After (Experimental)**
- **Post-Response Code Execution:** A novel API to execute tasks like logging and analytics after the response has finished streaming, improving efficiency.

#### **Create-Next-App Enhancements**
- **Updated Design and Features:** New flags for enabling Turbopack in local development and starting projects with a minimal setup.

#### **Bundling External Packages (Stable)**
- **Optimized Bundling:** New config options for bundling external packages in both App and Pages Router, enhancing cold start performance.

---

### Try the Next.js 15 RC Today!

To get started, install the Release Candidate with the following command:

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

For detailed documentation, visit [rc.nextjs.org/docs](https://rc.nextjs.org/docs) until the general availability of Next.js 15.

#### **React Compiler (Experimental) Setup:**

Install the Babel plugin:

```sh
npm install babel-plugin-react-compiler
```

Add the experimental configuration to `next.config.js`:

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

module.exports = nextConfig;
```

Optional: Configure the compiler in "opt-in" mode:

```js
const nextConfig = {
  experimental: {
    reactCompiler: {
      compilationMode: 'annotation',
    },
  },
};

module.exports = nextConfig;
```

### Hydration Error Improvements

Building on the enhancements from Next.js 14.1, Next.js 15 now offers improved hydration error views, providing source code insights and suggestions for resolving issues.

### Detailed Caching Changes

Next.js 15 introduces significant changes to caching defaults:
- **Fetch Requests:** Now use `no-store` by default, ensuring the most up-to-date data is fetched.
- **GET Route Handlers:** No longer cached by default.
- **Client Router Cache:** Page components reflect the latest data, while shared layout data and navigation behaviors are optimized for performance.

#### Opt-In Caching Options:

```js
const nextConfig = {
  experimental: {
    staleTimes: {
      dynamic: 30,
    },
  },
};

module.exports = nextConfig;
```

### Partial Prerendering Adoption

With the `experimental_ppr` option, you can incrementally adopt Partial Prerendering for specific layouts and pages, enabling a seamless blend of static and dynamic rendering.

#### Example Usage:

```js
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>
    </>
  );
}
```

Update `next.config.js` for incremental adoption:

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

module.exports = nextConfig;
```

### **Executing Code Post-Response with `next/after`**

Optimize secondary tasks without blocking the primary response using the `after()` API:

```js
import { unstable_after as after } from 'next/server';
import { log } from '@/app/utils';

export default function Layout({ children }) {
  after(() => {
    log();
  });

  return <>{children}</>;
}
```

### Other Notable Changes

- **Breaking Changes:** Minimum React version is now 19 RC, removal of `squoosh` in favor of `sharp` for `next/image`, and several other updates.
- **Improvements:** Enhanced metadata handling, optimized tree-shaking, and refined parallel routes.
- **Docs and Config Updates:** Improved documentation for authentication and environment variables.

For a comprehensive list of changes, check out the upgrade guide.

---

### Join the Community and Share Your Feedback

Dive into the Next.js 15 RC and let us know your thoughts. Your feedback helps shape the future of Next.js!

---

Stay tuned for more updates as we approach the general availability of Next.js 15!