Next Rspack

Next.js with Rspack

When to Use

Use this skill when you need to:

• Upgrade @rspack/core npm package version
• Upgrade rspack crate dependency versions
• Upgrade Rust version in rspack/rust-toolchain.toml (rspack directory only)
• Fix Rspack-related compilation issues
• Develop Rspack-specific features in Next.js

⚠️ Scope Limitation: This skill only applies to code and configuration under the rspack/ directory. The rust-toolchain.toml in the repository root is for Turbopack and is outside the scope of this skill.

Architecture Overview

Package Structure

Copy code
rspack/                          # Independent workspace (separate rust toolchain and npm releases)
├── Cargo.toml                   # Rust workspace configuration
├── rust-toolchain.toml          # Rust version configuration
├── package.json                 # @next/rspack-core package definition
├── lib/
│   ├── index.js                 # Exports @rspack/core + custom plugins
│   └── index.d.ts               # Type definitions
└── crates/
    └── binding/
        ├── Cargo.toml           # Rust crate dependencies (rspack_* crates)
        └── package.json         # @next/rspack-binding package definition

packages/
└── next-rspack/
    └── package.json             # References @next/rspack-core

Dependency Graph

Copy code
packages/next-rspack
    └── @next/rspack-core (rspack/package.json)
            ├── @rspack/core (npm dependency)
            └── @next/rspack-binding (rspack/crates/binding)
                    └── rspack_* crates (Cargo.toml dependencies)

Version Mapping Rules

Upgrade Process

Step 1: Get Upstream Version Information

Query https://github.com/web-infra-dev/rspack to obtain:

• Target @rspack/core npm version
• Corresponding rspack crate version
• Rust channel version from rust-toolchain.toml

Step 2: Update npm Dependencies

Edit rspack/package.json:

jsonCopy code
{
  "dependencies": {
    "@rspack/core": "<new version>",
    "@next/rspack-binding": "workspace:*"
  }
}

Step 3: Update Cargo.toml

Edit rspack/crates/binding/Cargo.toml, update all rspack crate versions:

tomlCopy code
[dependencies]
rspack_binding_builder        = { version = "=<new crate version>" }
rspack_binding_builder_macros = { version = "=<new crate version>" }
rspack_core                   = { version = "=<new crate version>" }
rspack_error                  = { version = "=<new crate version>" }
rspack_hook                   = { version = "=<new crate version>" }
rspack_plugin_externals       = { version = "=<new crate version>" }
rspack_regex                  = { version = "=<new crate version>" }
# rspack_sources version is managed separately, may not follow the main version

[target.'cfg(...)'.dependencies]
rspack_binding_builder = { version = "=<new crate version>", features = ["plugin"] }

[build-dependencies]
rspack_binding_build = { version = "=<new crate version>" }

Step 4: Update Rust Toolchain

Edit rspack/rust-toolchain.toml:

tomlCopy code
[toolchain]
profile = "default"
components = ["rust-src"]
channel = "<nightly version matching upstream rspack>"

Step 5: Verify Build

bashCopy code
# Execute in rspack directory
cd rspack

# Check Rust code
cargo check

# Build binding (requires Rust installed)
pnpm build

Step 6: Link to packages/next-rspack

rspack/ is an independent workspace not included in the root pnpm-workspace, manual linking is required:

bashCopy code
# Execute from repository root
cd packages/next-rspack

# Link locally built @next/rspack-core
pnpm link ../../rspack

Or modify packages/next-rspack/package.json to use local path (for local testing only, do not commit):

jsonCopy code
{
  "dependencies": {
    "@next/rspack-core": "link:../../rspack"
  }
}

Important: After linking, run pnpm install in the root directory to update dependency relationships.

Step 7: Run Tests

bashCopy code
# Execute from repository root
pnpm test-rspack

Key Files Checklist

Files to check/modify during upgrade:

Pre-requisites for Local Testing

Before running pnpm test-rspack, you must build and link @next/rspack-core:

bashCopy code
# 1. Build @next/rspack-core
cd rspack
pnpm install
pnpm build

# 2. Link to packages/next-rspack
cd ../packages/next-rspack
pnpm link ../../rspack

# 3. Return to root and update dependencies
cd ../..
pnpm install

# 4. Run tests
pnpm test-rspack

Note: After modifying Rust code under rspack/, you need to re-run pnpm build from step 1.

Test Commands

bashCopy code
# Full test suite (using Rspack compiler)
pnpm test-rspack

# Development mode tests
pnpm test-dev-rspack

# Production mode tests
pnpm test-start-rspack

# Run specific tests only
pnpm run with-rspack pnpm testonly -- <test-pattern>

All test commands set environment variables via with-rspack:

bashCopy code
cross-env NEXT_RSPACK=1 NEXT_TEST_USE_RSPACK=1

Development Notes

Environment Variable Differentiation

Use the NEXT_RSPACK environment variable to differentiate compilers in packages/next/ code:

typescriptCopy code
// Check if using Rspack
const isRspack = Boolean(process.env.NEXT_RSPACK)

if (process.env.NEXT_RSPACK) {
  // Rspack-specific logic
} else {
  // Webpack logic
}

Common Code Locations

• Compiler selection logic: packages/next/src/lib/bundler.ts
• Webpack configuration: packages/next/src/build/webpack-config.ts
• Loader adaptations: packages/next/src/build/webpack/loaders/

Custom Plugins

@next/rspack-core exports = @rspack/core + custom plugins:

• NextExternalsPlugin - externals handling plugin implemented in Rust

Release Process

Release via GitHub Actions workflow:

• Workflow: .github/workflows/release-next-rspack.yml
• Supports dry-run mode
• Supports multiple npm tags (latest, alpha, beta, canary)

References

• Upstream Rspack repository: https://github.com/web-infra-dev/rspack
• Rspack documentation: https://rspack.rs
• Next.js with Rspack example: examples/with-rspack/