Monorepos

Mastering Monorepos: How to Set Up Next.js & NestJS with Turborepo

Introduction

Monorepos are becoming a popular approach for managing multiple related projects in a single repository. If you're building a full-stack application with Next.js for the frontend and NestJS for the backend, using a monorepo setup can significantly improve code sharing, consistency, and development speed.

In this article, we'll walk through setting up a monorepo using Turborepo, which optimizes builds and runs tasks efficiently.

---

Why Use a Monorepo?

A monorepo helps manage multiple applications or services in a single repository, making it ideal for projects with shared code and multiple services.

✅ Benefits of a Monorepo

• Code Sharing: Reuse components, utility functions, and TypeScript types across frontend and backend.
• Single Dependency Management: All dependencies are managed in one place, reducing version conflicts.
• Faster Development: Turborepo caches previous builds, making incremental changes faster.
• Simplified CI/CD: One pipeline for the entire project, making deployment easier.
• Better Collaboration: Developers can work across services without managing multiple repositories.

---

Setting Up a Monorepo with Next.js & NestJS

Let's create a monorepo structure that includes:

• Frontend: Next.js
• Backend: NestJS
• Shared Code: Common UI components, utilities, and TypeScript types

1️⃣ Initialize the Monorepo

Turborepo helps manage monorepos efficiently by caching and running only necessary tasks.

Run the following command to create a new monorepo:

npx create-turbo@latest personal-finance-app
cd personal-finance-app

This sets up a Turborepo workspace with apps and packages folders.

2️⃣ Create Folder Structure

Organize your project like this:

/personal-finance-app
 ├── /apps
 │   ├── /frontend  (Next.js)
 │   ├── /backend   (NestJS)
 ├── /packages
 │   ├── /ui        (Shared UI components)
 │   ├── /utils     (Shared utility functions)
 │   ├── /types     (Shared TypeScript types)
 ├── package.json
 ├── turbo.json
 ├── tsconfig.json
 ├── .gitignore

3️⃣ Install Next.js for the Frontend

Navigate to the apps/frontend folder and create a Next.js app:

cd apps/frontend
npx create-next-app .

Then, add workspace support to package.json:

"workspaces": ["../../packages/*"]

4️⃣ Install NestJS for the Backend

Navigate to the apps/backend folder and set up NestJS:

cd ../backend
npx nest new .

Similarly, add workspace support to package.json:

"workspaces": ["../../packages/*"]

5️⃣ Configure the Root package.json

Modify the root package.json to enable workspaces and Turborepo commands:

{
  "name": "personal-finance-app",
  "private": true,
  "workspaces": ["apps/*", "packages/*"],
  "scripts": {
    "dev": "turbo run dev",
    "build": "turbo run build"
  },
  "devDependencies": {
    "turbo": "latest"
  }
}

6️⃣ Run Everything!

Install dependencies for all apps and packages:

yarn install

Then, start both frontend and backend:

yarn dev

Now, Turborepo runs Next.js and NestJS in parallel! 🎉

---

How Monorepos Work Under the Hood

Workspaces for Shared Code

You can create reusable packages under packages/, such as:

• packages/ui → Shared React components for frontend.
• packages/utils → Utility functions used in both frontend & backend.
• packages/types → Shared TypeScript interfaces.

To use these packages, simply install them in apps/frontend and apps/backend:

yarn workspace frontend add ../../packages/types

Turborepo’s Smart Caching

Turborepo caches previous builds, so when you change the frontend, it won’t unnecessarily rebuild the backend.

---

🚀 Deploying a Monorepo

Frontend (Next.js) Deployment

Deploy easily to Vercel:

yarn build
vercel deploy

Backend (NestJS) Deployment

For a backend, Railway or Render works well:

yarn build
railway up

---

Conclusion

A monorepo with Next.js and NestJS using Turborepo makes full-stack development faster, more efficient, and easier to manage. 🚀

Key Takeaways:

✅ Shared code reduces duplication.

✅ Faster builds with caching.

✅ One command to run both frontend & backend.

✅ Simplified deployments.

Are you planning to use a monorepo for your next project? Let me know in the comments! 🔥