Nx Monorepo

This is a monorepo example using Nx and a single Next.js site in ./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:

Getting Started

Execute

create-next-app

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

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

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

Development server

Run

npx nx serve app

Build

Run

npx nx build app

dist/

--prod

Running unit tests

Run

npx nx test app

Run

npx nx affected:test

Code scaffolding

Run

nx g @nrwl/react:component my-component --project=app

Generate an application

Run

npx nx g @nrwl/react:app new-app

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

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 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

1. Set

   NX_CACHE_DIRECTORY=/tmp/nx-cache

If using

@nrwl/nx-cloud@14.5.0

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:

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

Visit Nx Cloud to learn more.