mcpbeat Sign in

Next Rspack Agent Skill

> Maintain @next/rspack-core and @next/rspack-binding packages. Use when editing rspack/package.json, rspack/crates/binding/Cargo.toml, rspack/rust-toolchain.toml, or packages/next-rspack/package.json. Covers upgrading @rspack/core npm version, rspack_* crate versions, Rust toolchain version, building and linking for local testing, and NEXT_RSPACK environment variable usage. Does NOT apply to root rust-toolchain.toml (that's for Turbopack).

2k tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
141327
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository
npx skills add https://github.com/vercel/next.js --skill next-rspack

The instruction itself

23 sections, as written by the author

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

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

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

| @rspack/core npm version | rspack crate version | Notes |

| ------------------------ | -------------------- | ------------------------------------------------- |

| 2.0.0-rc.0 | 0.100.0-rc.0 | npm major.minor maps to crate 0.(major\*50+minor) |

| 1.3.x | 0.53.x | e.g., 1.3 → 0.53 |

| 1.2.x | 0.52.x | e.g., 1.2 → 0.52 |

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:

{
  "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:

[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:

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

Step 5: Verify Build

# Execute in rspack directory
cd rspack

# Check Rust code
cargo check

# Build binding (requires Rust installed)
pnpm build

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

# 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):

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

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

Step 7: Run Tests

# Execute from repository root
pnpm test-rspack

Key Files Checklist

Files to check/modify during upgrade:

| File Path | Modification |

| ------------------------------------ | ------------------------------------------------------------------------------------- |

| rspack/package.json | @rspack/core version, package version |

| rspack/crates/binding/Cargo.toml | rspack\_\* crate versions |

| rspack/crates/binding/package.json | binding package version |

| rspack/rust-toolchain.toml | Rust nightly version |

| packages/next-rspack/package.json | @next/rspack-core version reference (update on release, use link for local testing) |

Pre-requisites for Local Testing

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

# 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

# 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:

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:

// 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/

Other skills for the same job

different authors, same section of the catalogue
MCP Builder
by anthropics
vendor ×13

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

30k tokens scripts
Changelog Generator
by frostant
×9

Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.

774 tokens
Finishing A Development Branch
by ZhanlinCui
×7

Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup

1k tokens
MCP Builder
by JayZeeDesign
×7

Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).

37k tokens scripts
Vercel React Native Skills
by vercel-labs
vendor ×6

React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.

39k tokens
Vercel React Best Practices
by ratacat
×5

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

34k tokens
Next Best Practices
by vercel-labs
vendor ×4

Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling

20k tokens
Using Git Worktrees
by ZhanlinCui
×4

Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification

1k tokens

How to use it

Copy the folder

Take vercel/next-rspack from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npm. Without those the skill loads but fails at the first command.