---
title: "Monorepo with Nx"
description: "Learn to implement a monorepo with a single Next.js site using Nx."
url: "https://vercel.com/templates/next.js/monorepo-nx"
links:
  repository: "https://github.com/vercel/examples/tree/main/solutions/nx-monorepo"
  demo: "https://solutions-nx-monorepo.vercel.sh"
  deploy: "https://vercel.com/new/clone?demo-title=Monorepo+with+Nx&demo-description=Learn+to+implement+a+monorepo+with+a+single+Next.js+site+using+Nx.&demo-url=https%3A%2F%2Fsolutions-nx-monorepo.vercel.sh&project-name=nx-monorepo&repository-name=nx-monorepo&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fsolutions%2Fnx-monorepo&output-directory=out%2F.next&build-command=cd+..%2F..%2F+%26%26+npx+nx+build+app+--prod&root-directory=apps%2Fapp&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F4w8MJqkgHvXlKgBMglBHsB%2F6cd4b35af6024e08c9a8b7ded092af2d%2Fsolutions-nx-monorepo.vercel.sh_.png"
---

# Monorepo with Nx

Learn to implement a monorepo with a single Next.js site using Nx.

---
name: Monorepo with Nx
slug: monorepo-nx
description: Learn to implement a monorepo with a single Next.js site using Nx.
framework: Next.js
useCase: Documentation
css: CSS
deployUrl: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fsolutions%2Fnx-monorepo&project-name=nx-monorepo&output-directory=out%2F.next&build-command=cd+..%2F..%2F+%26%26+npx+nx+build+app+--prod&repository-name=nx-monorepo&root-directory=apps%2Fapp
relatedTemplates:
  - monorepo-turborepo
  - turborepo-next-basic
  - turborepo-sveltekit-starter
---

# Nx Monorepo

This is a monorepo example using [Nx](https://nx.dev) and a single Next.js site in [./apps/app](https://github.com/vercel/examples/tree/main/solutions/nx-monorepo/apps/app).

## Demo

https://solutions-nx-monorepo.vercel.sh

## How to Use

You can choose from one of the following two methods to use this repository:

### One-Click Deploy

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples):

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fsolutions%2Fnx-monorepo&project-name=nx-monorepo&output-directory=out%2F.next&build-command=cd+..%2F..%2F+%26%26+npx+nx+build+app+--prod&repository-name=nx-monorepo&root-directory=apps%2Fapp)

## Getting Started

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example:

```bash
npx create-next-app --example https://github.com/vercel/examples/tree/main/solutions/nx-monorepo nx-monorepo
```

```bash
yarn create next-app --example https://github.com/vercel/examples/tree/main/solutions/nx-monorepo nx-monorepo
```

```bash
pnpm create next-app --example https://github.com/vercel/examples/tree/main/solutions/nx-monorepo nx-monorepo
```

### Development server

Run `npx nx serve app` for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

### Build

Run `npx nx build app` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.

### Running unit tests

Run `npx nx test app` to execute the unit tests via [Jest](https://jestjs.io).

Run `npx nx affected:test` to execute the unit tests affected by a change.

### Code scaffolding

Run `nx g @nrwl/react:component my-component --project=app` to generate a new component.

### Generate an application

Run `npx nx g @nrwl/react:app new-app` to generate an application.

> You can use any of the plugins above to generate applications as well.

When using Nx, you can create multiple applications and libraries in the same workspace.

### Generate a library

Run `npx nx g @nrwl/react:lib my-lib` to generate a library.

> You can also use any of the plugins above to generate libraries as well.

Libraries are shareable across libraries and applications. They can be imported from `@with-nx/mylib`.

### Further help

Visit the [Nx Documentation](https://nx.dev) to learn more.

## Nx Cloud

This example is configured to work out of the box with Nx Cloud. However, if deploying an existing project to Vercel - ensure:

If using `@nrwl/nx-cloud@14.6.0` or above

1. Set `NX_CACHE_DIRECTORY=/tmp/nx-cache`

If using `@nrwl/nx-cloud@14.5.0` or below

1. Set `NX_CACHE_DIRECTORY=/tmp/nx-cache`
2. Set the `cacheDirectory` option for the `@nrwl/nx-cloud` runner in your `nx.json` to match the value of the `NX_CACHE_DIRECTORY` environment variable:

```jsonc
"runner": "@nrwl/nx-cloud",
"options": {
  // this must be the same value as `NX_CACHE_DIRECTORY`
  "cacheDirectory": "/tmp/nx-cache"
}
```

Visit [Nx Cloud](https://nx.app/) to learn more.

## Related Templates

### [Monorepo with Turborepo](https://vercel.com/templates/next.js/monorepo-turborepo)

Learn to implement a monorepo with a two Next.js sites that has installed three local packages.

### [Turborepo & SvelteKit Starter](https://vercel.com/templates/svelte/turborepo-sveltekit-starter)

This is an official starter Turborepo with two SvelteKit apps and two local packages.

### [Turborepo & Next.js Starter](https://vercel.com/templates/next.js/turborepo-next-basic)

This is an official starter Turborepo with two Next.js sites and three local packages

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.