Next.js
/Advanced
Monorepo Architecture
Definition
A single Git repository that contains multiple distinct projects (e.g., a Next.js web app, a React Native mobile app, and a shared UI library package) that can share code seamlessly.
Explain Like I'm New
If you have a website and a mobile app that both use the exact same 'Login Button', you don't want to write that code twice. A monorepo lets you put the website, the mobile app, and a 'Shared Code' folder into one massive Git repo. Both apps import the button from the shared folder.
Real World Example
Using Turborepo or Nx. A company has a marketing site (`apps/web`), an admin dashboard (`apps/admin`), and a shared design system (`packages/ui`).
Common Use Cases
- •Large tech companies
- •Code sharing across platforms
- •Microservices
Terminal Output
bash / terminal
/*
Turborepo Next.js Structure:
my-company-monorepo/
├── package.json
├── turbo.json # Orchestrates builds
│
├── apps/
│ ├── web/ # Next.js Marketing Site
│ │ ├── package.json # Imports "@company/ui"
│ │ └── app/page.tsx
│ │
│ └── admin/ # Next.js Internal Dashboard
│ ├── package.json # Imports "@company/ui"
│ └── app/page.tsx
│
└── packages/
├── ui/ # Shared React Components
│ ├── package.json # Name: "@company/ui"
│ └── index.tsx # Export Button, Card, etc.
│
└── config/ # Shared ESLint/TS configs
└── eslint-preset.js
*/
Interview Questions
basic
- What does Monorepo stand for?
intermediate
- What is the biggest challenge of a Monorepo without using a tool like Turborepo?