Surajan Shrestha

III

Monorepo in Next.js using Turborepo with Remote Caching & Vercel

One repository, several Next.js apps, and a build cache shared through Vercel.

, on Medium, readytowork publication

4
Monorepo in Next.js using Turborepo

Let's setup a Next.js Monorepo project using the popular tool Turborepo by Vercel with additional features like Remote Caching.

Turborepo is the go-to tool for creating a monorepo for a Next.js project easily with minimal setup and fast deployment due to it's remote caching feature.

As both Next.js and Turborepo are owned by Vercel, it's pretty easy to setup and scale accordingly. Let's jump into it.

Tech Stack

  1. Framework: Next.js
  2. Monorepo tool: Turborepo
  3. Deployment & CI/CD: Vercel
  4. Package manager: npm

What is a monorepo?

Monorepo is a single repository consisting of multiple projects with well-defined relationships. Each project/app has its own directory within the repository.

Example: Consider someone developing a mobile app, a web app, and a backend API. These individual projects/apps can be stored and managed within a single Git repository.

Why use a monorepo?

  1. Shared code/components: Same components can be shared across multiple projects/apps within the same repo in a well-defined way.
  2. Easier dependency management: No need to worry about version conflicts between different libraries or frameworks. All the dependencies are stored in the same place, so they're always compatible with each other.
  3. Simplified Build and Release Process (CI/CD): With a monorepo, you can streamline the build and release process for multiple projects/apps within the same repo.
  4. Unified Tooling and Workflows: Monorepo allows you to use a single set of tools, configurations, and workflows for the entire codebase.

Why use Turborepo to setup a Monorepo?

You could use other tools like Lerna, Nx, etc. to setup a monorepo but I chose Turborepo for some of these reasons:

  1. Very little configuration needed to get started on a good monorepo.
  2. If you're using Next.js, then it works out of the box.
  3. If you're deploying with Vercel, it ships really well with little configuration.
  4. One of the main reasons is: REMOTE CACHING, which is a total gamechanger. Using Remote Caching with Vercel, you can save yourself a large chunk of build time when you are shipping changes frequently.

Setup a Next.js monorepo using Turborepo

a. Create Turbo

First, install create-turbo CLI, which will initialize a Next.js monorepo project:

npx create-turbo@latest

After this, you'll be asked where to create the turborepo and which package manager to use. Let's choose npm. Then, Turborepo will generate a Next.js monorepo with a bunch of files and install all the dependencies.

b. Explaining our new monorepo

You'll see the following folder structure in our new monorepo:

-node_modules
-apps
  -docs
  -web
-packages
  -eslint-config
  -typescript-config
  -ui
-package.json
-turbo.json
-Others...

All of these are called Workspaces. apps/docs and apps/web are standalone Next.js with Typescript apps. packages/ui holds shared UI components that any app can use, and packages/eslint-config and packages/typescript-config hold the shared configuration.

f. Explaining "turbo.json" and running commands

In our monorepo's root directory, you'll find a file called turbo.json. This is how Turborepo manages tasks/commands for the whole monorepo.

{
  "$schema": "https://turbo.build/schema.json",
  "globalDependencies": ["**/.env.*local"],
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": [".next/**", "!.next/cache/**"]
    },
    "lint": {
      "dependsOn": ["^lint"]
    },
    "dev": {
      "cache": false,
      "persistent": true
    }
  }
}

Anything we put inside turbo.json's pipeline property will be a command that can be run with turbo run <task>, or turbo <task> for short.

The essay continues, with deployment to Vercel and remote caching, on Medium.


First published on Medium in the readytowork publication, 28 April 2024.

5