My front-end system uses Next.js v14.2.5, and it was initially set up with the default Webpack configuration. However, the system was running very slowly, so I decided to give Turbopack a try. Since the system was already built, I searched online for a way to add Turbopack without having to create a new project from scratch.
The Next.js documentation states that for existing projects, you can simply add the --turbopack flag when running the project:
next dev --turbopack.
However, this didn’t work, and I received the following error:
error: unknown option '--turbopack'.
After further research, I came across a post suggesting that I replace --turbopack with --turbo. I tried it, and it worked! The system’s RAM usage dropped from 5GB to 3GB. However, I’m curious about the difference between --turbopack and --turbo, as I couldn’t find any reference to the --turbo flag in the official Next.js/Turbo documentation.
I tried using the --turbopack flag as suggested by the Next.js documentation to enable Turbopack in my existing project. I expected it to work seamlessly and improve performance, as the documentation indicated that the flag could be used without needing to create a new project from scratch.
However, when I ran the command next dev --turbopack, I encountered an error: "error: unknown option '--turbopack'". After some research, I found a post suggesting replacing --turbopack with --turbo, which worked and significantly reduced the system's RAM usage. Despite this success, I was expecting to find more clarity in the documentation regarding the difference between the two flags (--turbopack and --turbo), but there was no mention of the --turbo flag.
The difference is in the type of versions. Different versions of Nextjs support different flags.
Nextjs 14 and Nextjs 13 support --turbo.
Nextjs 15 supports --turbopack