How to Use Turbopack 0.10 for Fast Refresh in Next.js 15 Apps With 100k+ LOC

Large Next.js applications with over 100,000 lines of code (LOC) often face slow build times and laggy hot module replacement (HMR), which hurts developer productivity. Turbopack 0.10, the Rust-based incremental bundler, paired with Next.js 15’s native Turbopack integration, delivers blazing-fast Fast Refresh even for massive codebases. This guide walks through setup, configuration, and optimization for 100k+ LOC projects.

What Is Turbopack 0.10?

Turbopack 0.10 is the latest stable release of Vercel’s Rust-powered bundler, designed to replace Webpack for Next.js projects. Key updates in 0.10 include improved incremental caching, better large module graph handling, and full compatibility with Next.js 15’s App Router and Server Components. Unlike Webpack, Turbopack only rebuilds the minimal set of files affected by a change, making it ideal for large codebases.

Why Fast Refresh Matters for 100k+ LOC Projects

Fast Refresh (formerly HMR) preserves component state and updates the UI without a full page reload. For apps with 100k+ LOC, traditional HMR can take seconds or even minutes to reflect changes. Turbopack 0.10 reduces Fast Refresh latency to under 100ms for most changes in large projects, by:

• Incremental rebuilding: Only recompiles modified files and their direct dependencies
• Persistent caching: Stores build artifacts across sessions to avoid redundant work
• Native Rust performance: 10x faster than JavaScript-based bundlers for large module graphs

Prerequisites

• Node.js 18.17 or later (Next.js 15 requirement)
• Existing Next.js 15 project with 100k+ LOC, or a new project scaffolded with npx create-next-app@latest
• Turbopack 0.10+ (included in Next.js 15 by default, but verify version)

Step 1: Verify Next.js 15 and Turbopack Versions

First, confirm your project uses Next.js 15 and Turbopack 0.10 or later. Check your package.json:

{
  "dependencies": {
    "next": "^15.0.0",
    "react": "^18.3.0",
    "react-dom": "^18.3.0"
  },
  "devDependencies": {
    "turbo": "^0.10.0" // Optional: Turbopack is bundled with Next.js 15, but verify
  }
}

Run npm list next turbo to confirm installed versions. If Next.js is below 15, upgrade with npm install next@latest.

Step 2: Enable Turbopack in Next.js 15

Next.js 15 enables Turbopack by default for development, but you can explicitly configure it in next.config.js to ensure compatibility with large codebases:

/** @type {import('next').NextConfig} */
const nextConfig = {
  turbopack: {
    // Enable Turbopack for all development builds
    enabled: true,
    // Optimize for large codebases: increase cache size
    cache: {
      maxSize: 1024 * 1024 * 1024 // 1GB cache limit
    }
  },
  // Ensure Fast Refresh is enabled (default, but explicit for clarity)
  fastRefresh: true
}

module.exports = nextConfig

Start the development server with npm run dev – Turbopack will automatically handle bundling and Fast Refresh.

Step 3: Configure Fast Refresh for 100k+ LOC

For large codebases, default Fast Refresh settings may need tweaks to avoid stale state or missed updates:

3.1 Ignore Large Static Asset Directories

Turbopack 0.10 can waste cycles watching large static directories (e.g., public/assets with 10k+ images). Exclude them from Fast Refresh watching in next.config.js:

turbopack: {
  watch: {
    exclude: ['public/assets/**/*', 'node_modules/**/*']
  }
}

3.2 Optimize Module Resolution

Large projects often have complex import paths. Configure Turbopack to resolve custom aliases faster:

turbopack: {
  resolveAlias: {
    '@components': './src/components',
    '@utils': './src/utils',
    '@styles': './src/styles'
  }
}

3.3 Disable Unnecessary Plugins

Remove Webpack-specific plugins from next.config.js – Turbopack 0.10 does not support Webpack plugins, and they can cause Fast Refresh failures in large projects.

Step 4: Validate Fast Refresh Performance

Test Fast Refresh latency for your 100k+ LOC project:

1. Open your app in Chrome/Edge DevTools, go to the Network tab, and filter by WS (WebSocket) to monitor HMR messages.
2. Modify a component file (e.g., src/components/Button.tsx) and save.
3. Check the Turbopack console output – you should see a message like Turbopack: Fast Refresh updated 3 modules in 87ms.
4. For 100k+ LOC projects, target Fast Refresh times under 200ms for small changes, under 1s for large component updates.

Troubleshooting Common Issues

• Fast Refresh not triggering: Ensure fastRefresh: true is set in next.config.js, and you’re not using Webpack-specific HMR code.
• Stale state after update: Turbopack 0.10 preserves state for function components and hooks, but class components may lose state. Refactor class components to functions if possible.
• High latency for large changes: Increase Turbopack’s cache size in next.config.js (as shown in Step 2) to avoid redundant rebuilding.
• Compatibility errors: Ensure all dependencies support Next.js 15 and Turbopack 0.10 – check Vercel’s compatibility docs for third-party libraries.

Optimizing Turbopack for 100k+ LOC

Additional tweaks for massive codebases:

• Use Turbopack’s --turbo flag explicitly: next dev --turbo to force Turbopack even if config is missing.
• Split large components into smaller, independent modules to minimize rebuild scope.
• Enable Turbopack’s experimental tree-shaking for unused code elimination in large bundles.

Conclusion

Turbopack 0.10 paired with Next.js 15 delivers reliable, sub-second Fast Refresh for apps with 100k+ LOC, eliminating the productivity drag of slow HMR. By following the configuration steps above, you can optimize build performance, preserve developer state, and scale your Next.js application without sacrificing iteration speed. Upgrade today to experience the difference for large codebases.