> For AI agents: the complete documentation index is available at https://rspack.rs/llms.txt, the full documentation bundle is available at https://rspack.rs/llms-full.txt.

# Next.js

[next-rspack](https://www.npmjs.com/package/next-rspack) is a community-driven plugin that enables Next.js projects to use Rspack as the bundler (experimental).

:::tip
See the [Rspack joins the Next.js ecosystem](https://rspack.rs/blog/rspack-next-partner.md) blog post to learn more details.
:::

## Installation

Install the `next-rspack` package:


```sh [npm]
npm add next-rspack -D
```

```sh [yarn]
yarn add next-rspack -D
```

```sh [pnpm]
pnpm add next-rspack -D
```

```sh [bun]
bun add next-rspack -D
```

```sh [deno]
deno add npm:next-rspack -D
```

:::tip
If you are using a Next.js version below 15.3.0, please upgrade to >= 15.3.0 first, see [Next.js - Upgrading](https://nextjs.org/docs/pages/building-your-application/upgrading).
:::

## Usage

Wrap your existing configuration in the project's `next.config.mjs` or `next.config.ts`:


**next.config.ts**

```ts
import withRspack from 'next-rspack';
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {/* config options here */};

export default withRspack(nextConfig);
```


**next.config.mjs**

```js
import withRspack from 'next-rspack';

/** @type {import('next').NextConfig} */
const nextConfig = {/* config options here */};

export default withRspack(nextConfig);
```


> Example: [next.js/examples/with-rspack](https://github.com/vercel/next.js/tree/canary/examples/with-rspack).

## Customizing Rspack configuration

Through Rspack's compatibility with webpack, when using `next-rspack`, you can customize configurations in the same way as you would with webpack.

In `next.config.mjs`, modify Rspack's configuration by adding the following callback function:

```js title="next.config.mjs"
export default {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack },
  ) => {
    // Important: return the modified config
    return config;
  },
};
```

> For more details, see the [Next.js - Custom Webpack Config](https://nextjs.org/docs/app/api-reference/config/next-config-js/webpack).

## Usage with next-compose-plugins

Alternatively, you can use [next-compose-plugins](https://www.npmjs.com/package/next-compose-plugins) to quickly integrate `next-rspack` with other Next.js plugins:

```js title="next.config.mjs"
import withPlugins from 'next-compose-plugins';
import withRspack from 'next-rspack';

export default withPlugins([
  [withRspack],
  // your other plugins here
]);
```