Configures Turbopack as the default Rust-based bundler for Next.js with incremental compilation and webpack loader compatibility. Use when optimizing Next.js development builds, migrating from webpack, or configuring custom loaders.
Configures Turbopack as the default Rust-based bundler for Next.js with incremental compilation and webpack loader compatibility. Use when optimizing Next.js development builds, migrating from webpack, or configuring custom loaders.
/plugin marketplace add mgd34msu/goodvibes-plugin/plugin install goodvibes@goodvibes-marketThis skill inherits all available tools. When active, it can use any tool Claude has access to.
references/loaders.mdreferences/migration.mdIncremental bundler written in Rust, built into Next.js for faster development builds.
# Turbopack is default in Next.js 16+
next dev # Uses Turbopack
next build # Uses Turbopack
# Explicitly use webpack instead
next dev --webpack
next build --webpack
import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
turbopack: {
// Custom loaders
rules: {
'*.svg': {
loaders: ['@svgr/webpack'],
as: '*.js',
},
'*.graphql': {
loaders: ['graphql-tag/loader'],
as: '*.js',
},
},
// Resolve aliases
resolveAlias: {
'@': './src',
'@components': './src/components',
'lodash': 'lodash-es',
},
// File extensions
resolveExtensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
// Module ID strategy
moduleIdStrategy: 'deterministic', // or 'named'
},
};
export default nextConfig;
// In experimental section
const nextConfig: NextConfig = {
experimental: {
turbo: {
rules: {
'*.svg': {
loaders: ['@svgr/webpack'],
as: '*.js',
},
},
},
},
};
turbopack: {
rules: {
'*.svg': {
loaders: ['@svgr/webpack'],
as: '*.js',
},
},
}
import Logo from './logo.svg';
export default function Header() {
return <Logo className="h-8 w-8" />;
}
turbopack: {
rules: {
'*.graphql': {
loaders: ['graphql-tag/loader'],
as: '*.js',
},
'*.gql': {
loaders: ['graphql-tag/loader'],
as: '*.js',
},
},
}
turbopack: {
rules: {
'*.yaml': {
loaders: ['yaml-loader'],
as: '*.js',
},
'*.toml': {
loaders: ['toml-loader'],
as: '*.js',
},
},
}
turbopack: {
rules: {
'*.md': {
loaders: ['raw-loader'],
as: '*.js',
},
'*.mdx': {
loaders: ['@mdx-js/loader'],
as: '*.js',
},
},
}
turbopack: {
rules: {
'*.svg': {
loaders: [
{
loader: '@svgr/webpack',
options: {
svgo: true,
svgoConfig: {
plugins: [{ name: 'removeViewBox', active: false }],
},
titleProp: true,
},
},
],
as: '*.js',
},
},
}
turbopack: {
resolveAlias: {
// Simple alias
'@': './src',
'@components': './src/components',
'@lib': './src/lib',
'@utils': './src/utils',
// Package substitution
'lodash': 'lodash-es',
'react-native': 'react-native-web',
// Conditional (use package.json exports)
'package-name': './node_modules/package-name/esm/index.js',
},
}
turbopack: {
// Order matters - first match wins
resolveExtensions: [
'.tsx',
'.ts',
'.jsx',
'.js',
'.mjs',
'.json',
],
}
| Feature | Turbopack | Webpack |
|---|---|---|
| Cold start | ~700x faster | Baseline |
| HMR updates | ~10x faster | Baseline |
| Memory usage | Lower | Higher |
| Incremental | Native | Limited |
Many webpack loaders work with Turbopack:
// Tested compatible loaders
'@svgr/webpack'
'graphql-tag/loader'
'yaml-loader'
'raw-loader'
'@mdx-js/loader'
'babel-loader'
'sass-loader'
// webpack plugins are NOT supported
// This won't work with Turbopack:
webpack: (config) => {
config.plugins.push(new SomeWebpackPlugin());
return config;
}
Find Turbopack-compatible alternatives or use webpack:
next dev --webpack # Keep using webpack if needed
// Before (webpack)
webpack: (config) => {
config.module.rules.push({
test: /\.svg$/,
use: ['@svgr/webpack'],
});
return config;
}
// After (Turbopack)
turbopack: {
rules: {
'*.svg': {
loaders: ['@svgr/webpack'],
as: '*.js',
},
},
}
# Error: loader 'some-loader' is not supported
# Check if loader is compatible or use webpack fallback
next dev --webpack
# Increase Node.js memory limit
NODE_OPTIONS="--max-old-space-size=8192" next dev
# Clear Turbopack cache
rm -rf .next
next dev
For projects with complex webpack configs:
npm install @next/rspack
# Use in next.config.ts
import { withRspack } from '@next/rspack';
export default withRspack({
// Full webpack API compatibility
});
See references/loaders.md for complete loader compatibility and references/migration.md for detailed migration guide.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.