Hello developers👋🏻
With the pre-release of Next.js 15 RC
, Vercel added a new bundler for Next.js called Turbopack
. Developers now have a powerful tool at their disposal to enhance the performance of their applications🎯
Turbopack
can be used in Next.js in both the pages
and app
directories for faster local development🔥
In this post, we'll take a closer look at Turbopack, its benefits, and how you can start using it in your Next.js projects immediately💪
What is Turbopack?🚀
Turbopack is the bundler from the team behind Next.js, designed to significantly improve the build times and runtime performance of Next.js applications.
Benefits of Turbopack🏋️♂️
This means less time waiting for your code to compile and more time focusing on development. In the future, the Vercel team will develop it to work for the next build
which will also increase the speed of the project build.
How to configure it?⚙️
Turbopack requires zero-configuration for most users, although it can be extended for more advanced use cases.
Unsupported features for now❌
Turbopack currently only supports next dev
and does not support next build.
How to get started with Turbopack🚀
- Create a new Next.js project: If you don't already have a Next.js project set up, you can create one using the command below.
Note: You will be prompted Would you like to use Turbopack for the next dev? … No / Yes
. Type "Yes"
.
When prompted for a project name type
"next-app"
🛠️.
npx create-next-app@rc
Also there is a shortcut to enable Turbopack
immediately without prompt by using the following command:
npx create-next-app@rc --turbo
- Enter your created Next.js project in your text code editor. You can use the following commands:
cd next-app
code next-app
- Run your Next.js project using the following command:
npm run dev
Voila!🎉
But, not only Turbopack as a bundler is new, right? We can see that Vercel in this update also changed the create-next-app
design.
Also, in our package.json
file in the scripts
part added --turbo
flag to our dev
script:
{
"scripts": {
"dev": "next dev --turbo", <---- here
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}
Now, once you have your application running in the local environment, you can test the differences between the Turbopack
and the previous Vite
bundler.🔄
Have you noticed improvements in performance and development speed?
Feel free to share your thoughts in the comments below. 💬🚀
Follow me on GitHub 🚀
Top comments (0)