Nx Monorepo

Nx Monorepo with Next.js is a Vercel-published example that demonstrates how to structure a single Next.js application inside an Nx workspace, complete with one-click deployment options and development commands tuned for Vercel.

What is the Nx Monorepo example?

This example, from the Vercel examples repository, walks through creating a monorepo where a single Next.js site lives in the apps/app directory. It uses Nx as the build system and @nrwl/react plugins for generating React applications, libraries, and components. The repo is bootstrapped with create-next-app and can be deployed to Vercel via a one-click clone that sets the output directory to out/.next and runs npx nx build app --prod.

Key Features

• One-click Vercel deployment — The included deploy button clones the repository, sets the root directory to apps/app, specifies the output directory as out/.next, and uses npx nx build app --prod as the build command.
• Nx task orchestration — Run npx nx serve app for a dev server on http://localhost:4200 with hot reload, or npx nx build app to produce build artifacts in the dist/ directory.
• Code scaffolding — Generate new components with nx g @nrwl/react:component my-component --project=app, new applications with npx nx g @nrwl/react:app new-app, and new libraries with npx nx g @nrwl/react:lib my-lib.
• Jest unit testing — Execute tests with npx nx test app, or use npx nx affected:test to run only tests affected by a change.
• Nx Cloud support — The workspace is configured to work with Nx Cloud out of the box; existing projects deployed to Vercel should set NX_CACHE_DIRECTORY=/tmp/nx-cache to enable caching.
• Multiple apps and libraries — Nx allows creating multiple applications and libraries in the same workspace, with libraries imported from @with-nx/mylib.

Who should use this template?

• Next.js developers who want to adopt a monorepo structure without losing the familiar create-next-app workflow.
• Teams building multiple apps or libraries that need shared code and consistent build/test tooling across projects.
• Developers deploying to Vercel who want a reference setup showing the correct build command, root directory, and cache settings for an Nx workspace.

What can you do with it?

• Scaffold new applications and libraries — Use the @nrwl/react generators to add apps and libs to the workspace, then share code between them via package-style imports.
• Run targeted test suites — With npx nx affected:test, only the tests touched by a change execute, which speeds up CI pipelines.
• Deploy directly to Vercel — Use the one-click deploy link to get a live demo of the example, or adapt the build settings for an existing Nx monorepo.
• Speed up builds with Nx Cloud — The included Nx Cloud configuration lets you share build and test caches across team members when NX_CACHE_DIRECTORY is set correctly.

How does it work?

Bootstrap the example with npx create-next-app --example https://github.com/vercel/examples/tree/main/solutions/nx-monorepo nx-monorepo using npm, Yarn, or pnpm. Then start the development server with npx nx serve app, build with npx nx build app, and test with npx nx test app. For Vercel, either click the deploy button or configure the project manually with the provided build command and root directory.

Pros and cons

• Pros: Clear, centralized commands for scaffolding, testing, and building through Nx; the example is ready for Vercel deployment with the correct output directory and build command; including Nx Cloud integration from the start.
• Cons: The page notes that older @nrwl/nx-cloud versions below 14.6.0 require manual configuration of cacheDirectory in nx.json to match NX_CACHE_DIRECTORY on Vercel, which adds an extra setup step for existing projects.

Alternatives

Turborepo is a direct alternative for monorepo management with its own caching and task runner, and Vercel also publishes a Turborepo-based monorepo example.

FAQ

How do I start the development server?

Run npx nx serve app from the workspace root. The development server starts at http://localhost:4200 and automatically reloads when you change source files.

How do I generate a new component or library?

Use nx g @nrwl/react:component my-component --project=app for a component, npx nx g @nrwl/react:app new-app for an application, or npx nx g @nrwl/react:lib my-lib for a shared library.

How do I run unit tests?

Run npx nx test app to execute all unit tests with Jest. To run only the tests affected by a change, use npx nx affected:test.

How do I deploy this to Vercel?

Use the one-click deploy button in the example's README, or manually set the root directory to apps/app, the output directory to out/.next, and the build command to cd ../../ && npx nx build app --prod.

Does the example support Nx Cloud?

Yes, the workspace is configured to work with Nx Cloud. For Vercel deployments, set the NX_CACHE_DIRECTORY environment variable to /tmp/nx-cache to enable caching; older versions of @nrwl/nx-cloud also need matching cacheDirectory in nx.json.