#Next.js

next-rspack is a community-driven plugin that enables Next.js projects to use Rspack as the bundler (experimental).

#Installation

Install the next-rspack package:

npm add next-rspack -D

yarn add next-rspack -D

pnpm add next-rspack -D

bun add next-rspack -D

deno add npm:next-rspack -D

#Usage

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

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

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

export default withRspack(nextConfig);

const withRspack = require('next-rspack');

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

module.exports = 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.js, modify Rspack's configuration by adding the following callback function:

module.exports = {
  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:

const withPlugins = require('next-compose-plugins');
const withRspack = require('next-rspack');

module.exports = withPlugins([
  [withRspack],
  // your other plugins here
]);