Next Js Monorepo Setup and Best Practices

Setting up a monorepo for your Next.js project can be a game-changer for scalability and maintainability.

Lerna is a popular tool for managing monorepos, and it's especially well-suited for Next.js projects because it allows you to run scripts and commands across all packages in the monorepo.

One of the key benefits of using a monorepo with Next.js is that it enables you to share code and components across multiple applications, making it easier to maintain consistency and reduce duplication.

By using a monorepo with Next.js, you can also take advantage of features like automatic dependency resolution and simplified testing.

A different take: Nextjs Usecontext

Using a monorepo for your Next.js project can bring numerous benefits. One of the most significant advantages is that it allows you to share code and components across multiple projects and apps within the same repository in a well-defined way.

With a monorepo, you can simplify your dependency management by storing all your dependencies in one place. This eliminates the risk of version conflicts between different libraries or frameworks, making it easier to maintain a consistent and reliable codebase.

Explore further: Monorepo Nextjs

A monorepo also streamlines your build and release process, making it easier to automate and coordinate the build, testing, and deployment processes across your entire codebase. This is especially useful for large and complex projects.

By using a monorepo, you can unify your tooling and workflows across all your projects, simplifying the development process and ensuring consistency. This can save you a significant amount of time and effort in the long run.

Here are some key benefits of using a monorepo for your Next.js project:

To set up a Next.js monorepo, start by creating a new folder at the root of your project, apps/, to store the Next.js apps.

Next, add the admin and store applications by running yarn add next. Then, open the package.json file of the admin application, located at apps/admin/package.json, and replace the value of the dev script with next dev --port 3001 so it can run on a different port.

See what others are reading: Nextjs Dev Rel

Run the development server for both projects with yarn dev to ensure everything works properly. We will do the same in the apps/store/pages/index.js file, so insert the following code:

Now, we've completed the basic setup necessary for both Next.js apps. To set up Turborepo for running our development tasks, workspaces and tasks are the building blocks of a monorepo. Package managers like Yarn and npm work well for installing packages and configuring workspaces, but they aren’t optimized for running tasks in a complex project setup like a monorepo.

To create a new directory for the project and set up the package.json, enter the following command in your terminal: yarn init. If that was successful, you should have an output similar to the image below.

To convert our single project to a monorepo, we need three steps:

To define our workspace, open the package.json file at the root of the project and insert the code below:

The workspaces field in the package.json file is an array of paths that tells the package manager where our workspaces are located.

To add the workspace config, create the following pnpm-workspace.yaml file:

This file tells Turborepo where to find our workspaces.

Consider reading: Nextjs Server Actions File Upload

To set up a Next.js monorepo, you'll need the right tools. Turborepo is a popular choice, as it's easy to use, fast, and effective for managing TypeScript/JavaScript codebases. It's built on workspaces, a feature supported by Yarn, npm, and pnpm for managing multiple packages within a top-level root package.

Turborepo ships with several features that make working with monorepos easy, including incremental builds, parallel execution, remote caching, and dependency graph visualization. These features ensure that builds are executed efficiently and quickly, even in complex project setups.

Here are some key monorepo tools for working with JavaScript/TypeScript codebases, including Turborepo, Nx, Bazel, and Lerna.

Turborepo is a popular tool for working with JavaScript/TypeScript monorepos, and it's the tool of choice for this tutorial.

Turborepo is built on workspaces, a feature supported by Yarn, npm, and pnpm for managing multiple packages within a top-level root package.

Turborepo ships with four key features: incremental builds, parallel execution, remote caching, and dependency graph visualization.

Here are some of the monorepo tools available for working with JavaScript/TypeScript codebases:

Turborepo's incremental builds ensure that builds are executed only when there are changes in a workspace, preventing unnecessary computations.

Turborepo's parallel execution feature executes tasks in parallel while maximizing the use of every available core in the CPU to ensure quick executions.

Installing the necessary tools is a crucial step in setting up your monorepo. You'll need to install Turborepo, a tool that helps manage tasks and dependencies in your monorepo.

To install Turborepo, run the following script at the root of your monorepo: `pnpm install turborepo`. Once installed, create a new file called `turbo.json` at the root of your monorepo to store the configuration required for Turborepo to work.

The `turbo.json` file is where you'll configure Turborepo to run the Next.js applications in your `apps/` directory. You can do this by adding the following code to the `turbo.json` file:

Explore further: How to Run Nextjs to Build

```

{

"pipeline": {

"build": {

"dependsOn": ["apps/**/*"]

}

}

}

```

This configuration tells Turborepo to run the build task for all Next.js applications in the `apps/` directory.

You can also install ESLint and the plugins relevant to your project with the following command:

```

pnpm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

```

This will install the necessary dependencies for ESLint to work with your project.

Here's a summary of the tools you'll need to install:

Package.json is a file that contains metadata for a project, including its dependencies and scripts. It's like a resume for your project, listing all the tools and libraries it relies on.

In a monorepo setup, like the one we're using, package.json files can be found in different locations, such as apps/web, apps/docs, and packages/ui. These files contain a dependencies section that lists the packages the project depends on.

One of the packages we're using is @repo/ui, which is stored in the packages/ui directory. This package has its own package.json file, listing its own dependencies and metadata.

A different take: Using State in Next Js

The workspaces field in the root package.json file tells the package manager where to find our workspaces, which are separate directories for our applications and packages. This allows us to manage multiple projects and packages from a single location.

By understanding how package.json works, we can better manage our dependencies and make changes to our project with confidence.

In modern frontend development, components are the building blocks of every application, irrespective of the size of the project. To make codebases easier to maintain, we break down complex UIs into reusable components and abstract them to a shared component library.

The breaking down of complex UIs into reusable components is a standard development practice today. This makes it easier to follow software development best practices like DRY.

To create a reusable component library, we'll need to create a new workspace. Enter the following command at the root of the monorepo to create a new workspace for the component library.

For another approach, see: Create New Nextjs App

A reusable button component can be used by Next.js applications. Create a new file, Button.jsx, and enter the following code in the packages/shared/ui workspace.

The ui package should be added as a dependency in the workspace's package.json file. Add the ui package by inserting the following code in the dependencies field within the package.json file of the admin and store workspaces.

To use the Button component in our Next.js apps, we'll need to run yarn install to update the dependencies in the node_modules folder.

On a similar theme: File Upload Next Js Supabase

To set up a Next.js monorepo using Turborepo, you'll need to create a `pnpm-workspace.yaml` file. This file contains the configuration for your workspace.

In this file, you can define your workspaces, which are essentially separate projects within your monorepo. For example, you might have workspaces for a Next.js app, a shared UI component library, and a shared ESLint configuration.

To get started, you'll need to create a `next.config.js` file in your blogs directory. This file will contain configuration settings for your Next.js app.

A fresh viewpoint: Next Js File Structure

A repository is a version-controlled storage space for your code, where you can store and manage different projects.

It's a single container that holds all your projects, making it easier to collaborate and manage your codebase.

In a typical setup, each project is stored on a separate repository with its own configuration for building, testing, and deployment.

This can get messy and hard to manage, especially for large projects or teams.

A monorepo, on the other hand, is a single repository that contains several isolated projects with well-defined relationships.

This approach allows for better organization and easier management of your codebase.

For more insights, see: Next Js Single Page Application

Our repository is organized into a monorepo structure, which allows us to share code and components across multiple projects with ease.

We have a total of five workspaces: apps/docs, apps/web, packages/ui, packages/eslint-config, and packages/typescript-config. Each of these workspaces serves a specific purpose.

The apps/docs and apps/web workspaces are standalone Next.js projects with Typescript, allowing us to build separate applications. The packages/ui workspace contains shared UI components that can be used by any app, making it easier to reuse code.

The packages/eslint-config and packages/typescript-config workspaces hold shared Eslint and Typescript configurations, respectively, ensuring consistency across all projects.

While having multiple Next.js apps can be beneficial, it also means that building each of them can take more time.

A fresh viewpoint: Eslint Next Js

To deploy your Next.js monorepo, you'll want to use Vercel, a platform that's well-suited for monorepos thanks to its ownership of Next.js and Turborepo.

First, create a Vercel account, ideally using your GitHub account for a seamless sign-up process. You can then import your Git repository and configure your project, giving it a name and selecting the root directory where your project will run from.

When deploying individual projects within your monorepo, such as apps/web, you'll need to set up a build command that ensures only the affected project is built, rather than the entire monorepo. This is achieved by running `cd ../.. && turbo run build --filter=web` from within the apps/web directory.

Check this out: How to Run Next Js App

To deploy your monorepo to Vercel, you'll need to create a Vercel account, preferably using your GitHub account.

First, go to Vercel and click on "Create or Add new project."

You'll need to import your Git Repository, select your GitHub Repo, and click on Import.

Check this out: Next Js Set Cookie

Configure your project by giving it a name, selecting the root directory, and setting up build and output settings.

The Build Command should be "cd ../.. && turbo run build --filter=web", which will build only the apps/web project from the root directory.

Hit Deploy, and your project will be deployed in a couple of seconds.

You can view your project by clicking on one of the Domains links.

This setup ensures that one app doesn't get built if changes are done only in another app, like if changes are made only in apps/web.

To set up Ignored Build Step in each monorepo project, you'll need to authenticate the Turbo CLI with your Vercel account.

Run the command "npx turbo login" in your root directory, and you'll be redirected to Vercel's authentication page.

Log in to your Vercel account to allow authentication to your Turbo CLI.

Suggestion: Nextjs by Vercel Meaning

Remote Caching is a feature that allows you to share the cached outputs of tasks across your entire team and CI/CD pipeline.

This can significantly speed up builds by eliminating the need to re-run tasks that have already been completed by someone else on your team.

Remote Caching can be especially useful for sharing build files with your team.

You can store the build cache in a place like Vercel and then reuse it later on.

To link your Turborepo to Vercel’s Remote Cache, run the command npx turbo link.

You’ll be asked if you want to enable Remote Caching for your local repo location, and you should answer yes.

You’ll also be asked to select the Vercel scope and Remote Cache associated with this Turborepo, so choose the correct organization or account name.

If you run npm run build after linking your Turborepo, you’ll see that your whole monorepo gets built in under seconds or milliseconds.

This is known as going FULL TURBO, which means the local build has fetched the remote cache stored in Vercel.

Even if you delete your local build cache, the remote cache will still be fetched from Vercel when you run npm run build again.

You can delete your local build cache by running the command npx turbo reset, and then re-run npm run build to see the remote cache in action.

For more insights, see: Next Js Npm Install

To begin building a Next.js monorepo, you need to create a new directory for the project and set up the package.json.

In your terminal, enter the command to create a new directory for the project and set up the package.json.

If that was successful, you should have an output similar to the image below.

Worth a look: What Is Src Directory in Next Js

First, clone the repository from https://github.com/himohitmehta/himohit.me/tree/before-turbo-repo.

To install the dependencies, use pnpm install. This will get everything set up for you to run the application.

Run the application using pnpm dev to check if everything is working fine.

You'll know you're on the right track if you see something like the output described in the instructions.

Readers also liked: Install Next Js

To convert your project to a monorepo, you'll need to follow these steps.

First, move your single app to an apps folder, where your web applications will be housed. This is the first step in creating a monorepo.

Next, define your workspace by creating a package.json in the root folder. This will help you manage your project's dependencies.

Explore further: What Is .next Folder in Next Js

Now, create a packages folder, where you'll put your shared components and logic. This is where things start to get interesting.

Here's a quick rundown of the steps you need to take:

Finally, run pnpm init inside the ui folder to get started.