DEV Community

Cover image for Next.js 15 just got faster: Comprehensive guide to testing Turbopack
Nikola Perišić
Nikola Perišić

Posted on

Next.js 15 just got faster: Comprehensive guide to testing Turbopack

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🚀

  1. 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
Enter fullscreen mode Exit fullscreen mode

Also there is a shortcut to enable Turbopack immediately without prompt by using the following command:

npx create-next-app@rc --turbo
Enter fullscreen mode Exit fullscreen mode
  1. Enter your created Next.js project in your text code editor. You can use the following commands:
cd next-app
code next-app
Enter fullscreen mode Exit fullscreen mode
  1. Run your Next.js project using the following command:
npm run dev
Enter fullscreen mode Exit fullscreen mode

Voila!🎉

Next.js 15

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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)