Skip to main content

Turbopack (beta)

tip

Who doesn't like a fast bundlers? 🚀

Project initialization​

npx create-next-app@latest ./next-app
❯ pnpx create-next-app@latest
✔ What is your project named? … next-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /home/seb/Dev/next14-course/examples/next-app.

Build modes​

Traditional mode​

In this mode the project is being build by webpack.

"scripts": {
  "dev": "next dev",
  ...
},

Turbo mode​

In this mode the project is being build by new in-house vercel solution: Turbopack - a bundler written in Rust.

"scripts": {
  "dev": "next dev --turbo",
  ...
},

Results​

  • Traditional mode - ✓ Ready in 1483ms.
  • Turbo mode - ✓ Ready in 1212ms. - 20% faster

What is more important also hot-reloading is faster.

Turbopack is Dev mode only

Due to a fact that Turbopack is not supporting advanced configuration options like webpack does it is possible to use it only in development mode.