Turborepo in Next.js: Guide for Faster & Smarter Builds

Abhinandan — Sun, 29 Sep 2024 09:52:37 +0000

Hey developer! 👋 If you have been building Next.js projects, you've probably seen Turborepo at some place, most probably GitHub repos.
Don’t worry if you’re new to it—by the end of this post, you’ll know what Turborepo is, when to use it, and most importantly, how to set it up in your Next.js project. Let’s dive in!

1. What is Turborepo? 🚀

So, Turborepo is a high-performance build system designed for managing monorepos in JavaScript and TypeScript projects.

Now, before your head spins with jargon, let me break it down. A monorepo means multiple related projects or apps are stored in a single repository, like if you have a web app and a mobile app that share the same code. Managing these can get messy, and that’s where Turborepo comes to the rescue you from the mess :)

In simple terms:

Turborepo helps you manage and optimize how your project runs tasks like builds, tests, and linting, especially when you have a large codebase. It’s like a super-organized manager that makes sure no time is wasted.

2. Why Should You Use Turborepo? ✨

This is one of the important question that why should you use. So, if you’re working on a Next.js project, Turborepo can be a game-changer:

🚀 Super Fast Builds: Turborepo caches the results of tasks (like builds) and reuses them if nothing has changed. This way, you only build what’s changed instead of building everything over and over again. Think of it as only reheating your leftovers instead of cooking a whole new meal each time!
🔄 Parallel Task Execution: Normally, tasks like testing or building are done one by one. But with Turborepo, tasks that don’t depend on each other run at the same time. It's like cooking multiple dishes on different burners instead of waiting for each one to finish.
🛠 Incremental Builds: Only the code that’s changed gets rebuilt. This reduces the waiting time, especially when working with large projects.
📦 Monorepo Magic: If your project is a monorepo (e.g., multiple apps and shared components), Turborepo makes managing it much easier by optimizing tasks across all projects at once. No more running separate builds for each project.

3. When Should You Use Turborepo? 🤔

This is something that you should keep in mind while using Turborepo:

You have a large Next.js project or monorepo with multiple apps and shared packages.
Your build and test times are slowing you down, and you need faster results.
You’re working with CI/CD pipelines (Continuous Integration/Continuous Deployment) and want to optimize them.
You have tasks that can be run in parallel, like running lint checks, tests, and builds at the same time.

In smaller projects, the benefits might not be immediately noticeable, but as your project scales, Turborepo becomes a lifesaver.

4. Setting Up Turborepo in a Next.js Project 🛠️

Let’s get to the fun part: setting up Turborepo in a Next.js project! Don’t worry, it’s easier than you think.

I always believe that visualisation and real implementation make it easy to understand. So I created this GitHub Repo, just to structure of a Next.js + Turborepo project set-up

Step 0: Set up Next.js Project

You can go to the Next.js official site and get the command to start or simply copy-paste this command and wait for npm to get the project ready

 npx create-next-app@latest --typescript

Step 1: Install Turborepo

First, let’s add Turborepo to your project. Open your terminal and run this command in your Next.js project:

npm install turbo --save-dev

# `npm install turbo --global` 
#  if you may need to install it

If you’re using yarn or pnpm, the command is pretty similar:

yarn add turbo --dev

Step 2: Create a `turbo.json` File

Next, we need to set up Turborepo’s configuration. Create a file called turbo.json in the root directory of your project. Here’s a simple configuration:

{
  "$schema": "https://turbo.build/schema.json",
  "tasks": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "check-types": {
      "dependsOn": ["^check-types"]
    },
    "dev": {
      "persistent": true,
      "cache": false
    }
  }
}

What’s happening here? 🤔

build: This task builds your project. The dependsOn means that the build task depends on any other builds in the monorepo (if you have them). The outputs tells Turborepo where to cache the results (in this case, the .next and dist folders).
dev: This is for your development server. Caching is disabled here since you’ll want to see real-time changes.
lint: Linting (checking your code for errors) doesn’t generate any files, so outputs is empty. If you have heard about ESLint & Prettier then it is related to that.

Step 3: Update Your `package.json` Scripts

Now, we need to update the scripts in your package.json to use Turborepo. It’s simple:

{
  "scripts": {
  "check-types": "tsc --noEmit"
  }
}

Step 4: Run the build and check-types with turbo

  turbo build check-types

without changing code run this

  turbo check-types build

you will see something like this

 Tasks:    2 successful, 2 total
Cached:    2 cached, 2 total
  Time:    185ms >>> FULL TURBO

This tells Turborepo to run your tasks using its optimized system instead of running them one by one.

Step 4: Run Turborepo 🚀

You’re all set! Now, let’s run the development server:

turbo dev

Behind the scenes, Turborepo will be caching, optimizing, and running tasks in parallel to give you faster results!

Turborepo will handle running tasks across both apps efficiently. No more waiting forever for everything to build!

If you could not set up your project properly then you can refer to the Official Docs here (Thanks to Vercel)

Wrapping It Up 🎁

Turborepo is like the secret sauce to speeding up large Next.js projects. By caching results, running tasks in parallel, and only building what’s needed, it saves you tons of time. Plus, it’s super easy to set up, just like we did above.

If your Next.js project is getting larger and build times are becoming an issue, Turborepo will be your best friend. Whether you’re managing multiple apps in a monorepo or just looking for faster builds, it’s the tool you didn’t know you needed—until now.

I hope you got some value or at least a few points from this blogs

Feel free to drop any questions below! I'm always happy to help 😊

Thanks for Reading :)

DEV Community: Abhinandan