import { Tabs, Tab, PackageManagerTabs } from '@theme';

Next.js

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 blog post to learn more details. :::

Installation

Install the next-rspack package:

:::tip If you are using a Next.js version below 15.3.0, please upgrade to >= 15.3.0 first, see Next.js - Upgrading. :::

Usage

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

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

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

export default withRspack(nextConfig);

import withRspack from 'next-rspack';

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

export default withRspack(nextConfig);

Example: next.js/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:

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.

Usage with next-compose-plugins

Alternatively, you can use next-compose-plugins to quickly integrate next-rspack with other Next.js plugins:

import withPlugins from 'next-compose-plugins';
import withRspack from 'next-rspack';

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