In this article, we’ll explore the seamless integration of Turbopack with Next.js 13, the latest iteration of the popular React framework.
What is Turbopack?
As of the time this article is written, Turbopack is currently in beta and not ready for production use.
- Incremental Bundling: Turbopack is designed with incremental bundling at its core. This approach drastically reduces build times, making it ideal for large projects.
- Out-of-the-Box Compatibility: Turbopack offers comprehensive support for a wide range of web technologies, including TypeScript, JSX, CSS, CSS Modules, and WebAssembly. Developers can start using these technologies without the need for complex configurations.
- Lightning-Fast HMR (Hot Module Replacement): Turbopack ensures that Hot Module Replacement remains speedy, even as your app’s size grows. This feature is crucial for maintaining a smooth development experience by instantly updating modules without a full page reload.
- Native Support for React Server Components: For projects using React Server Components, Turbopack provides native support. This ensures seamless integration and efficient bundling for React-based applications.
- Simultaneous Multiple Environment Targets: Turbopack allows developers to build and optimize for multiple environments concurrently, such as the Browser, Server, Edge, Server-Side Rendering (SSR), and React Server Components. This versatility simplifies the development of complex web applications.
- Next.js Support: Next.js 13 comes with built-in support for Turbopack.
Here is an overview of the fundamental principles and architectural concepts that power Turbopack’s impressive speed improvements. Here’s a summary of the contents:
- The Turbo Engine: Turbopack’s speed is attributed to the Turbo engine, which enables incremental computation.
- Function-Level Caching: In a Turbo engine-powered program, specific functions can be marked as ‘to be remembered.’ When these functions are called, the Turbo engine remembers their input and output, saving them in an in-memory cache.
- The Cache: The Turbo engine stores its cache in memory, making it ideal for development servers. However, there are plans to persist this cache, allowing it to remember work done across runs and machines.
- Compiling by Request: Turbopack enhances startup time by compiling only the necessary code to get started. It distinguishes between page-level compilation and request-level compilation, ensuring that only the required code is compiled, reducing unnecessary work and improving performance.
Turbopack vs. Webpack
Turbopack boasts significantly faster performance while maintaining flexibility and extensibility. Turbopack’s standout feature is its incremental architecture, which outperforms Webpack on various key metrics. For exact numbers, visit the Turbopack documentation.
Turbopack’s dev server starts up much faster, making it an ideal choice for rapid development. Additionally, Turbopack excels in handling code updates, with Fast Refresh performance that remains consistently fast regardless of application size. Overall, Turbopack presents a compelling alternative to Webpack, especially for developers seeking improved speed and performance in their development workflow.
Using Turbopack with Next.js 13
Turbopack was written by the creators of Webpack and Next.js so it is no surprise that Next.js 13 has built-in support. However, Turbopack is not enabled by default. To enable Turbopack, simply add
'--turbo' to the script that runs the development server:
"dev": "next dev --turbo",
"build": "next build",
"start": "next start",
"lint": "next lint"
That’s all it takes to leverage Turbopack’s incredibly fast updates and quick startup time on your dev server!
Does Next.js use Turbopack?
Turbopack can be enabled in Next.js 13 with the following script
"dev": "next dev --turbo" in the
Is Turbopack ready for production?
Turbopack is currently in beta and not ready for production use.