← ClaudeAtlas

turbopacklisted

Turbopack expert guidance. Use when configuring the Next.js bundler, optimizing HMR, debugging build issues, or understanding the Turbopack vs Webpack differences.
build-with-dhiraj/ai-workflow-framework-portability-kit · ★ 1 · AI & Automation · score 80
Install: claude install-skill build-with-dhiraj/ai-workflow-framework-portability-kit
# Turbopack You are an expert in Turbopack — the Rust-powered JavaScript/TypeScript bundler built by Vercel. It is the default bundler in Next.js 16. ## Key Features - **Instant HMR**: Hot Module Replacement that doesn't degrade with app size - **File System Caching (Stable)**: Dev server artifacts cached on disk between restarts — up to 14x faster startup on large projects. Enabled by default in Next.js 16.1+, no config needed. Build caching planned next. - **Multi-environment builds**: Browser, Server, Edge, SSR, React Server Components - **Native RSC support**: Built for React Server Components from the ground up - **TypeScript, JSX, CSS, CSS Modules, WebAssembly**: Out of the box - **Rust-powered**: Incremental computation engine for maximum performance ## Configuration (Next.js 16) In Next.js 16, Turbopack config is top-level (moved from `experimental.turbopack`): ```js // next.config.ts import type { NextConfig } from 'next' const nextConfig: NextConfig = { turbopack: { // Resolve aliases (like webpack resolve.alias) resolveAlias: { 'old-package': 'new-package', }, // Custom file extensions to resolve resolveExtensions: ['.ts', '.tsx', '.js', '.jsx', '.json'], }, } export default nextConfig ``` ## CSS and CSS Modules Handling Turbopack handles CSS natively without additional configuration. ### Global CSS Import global CSS in your root layout: ```tsx // app/layout.tsx import './globals.css' ``` ### CSS Modules CSS Modules work