🔧 Nx Generator Catalog
Available generators for code scaffolding.
Philosophy
Generator-First Principle: Before writing any code, check if an Nx generator exists to scaffold it.
Benefits
- Ensures consistent project structure
- Configures build/test/lint automatically
- Maintains Nx project graph integrity
- Reduces boilerplate and configuration drift
Installed Generators
@nx/js - TypeScript/JavaScript Libraries
Use Cases: Shared utilities, domain logic, business rules, data models, API clients
1
| pnpm exec nx g @nx/js:library <name> --directory=libs/<domain>
|
Options:
| Option |
Values |
Default |
--bundler |
none, tsc, swc, rollup, esbuild, vite |
tsc |
--unitTestRunner |
jest, vitest, none |
jest |
--linter |
eslint, none |
eslint |
--publishable |
flag |
- |
@nx/react - React Components & Libraries
Use Cases: UI components, feature libraries, custom hooks, state management
1
2
3
4
5
6
7
8
9
10
11
| # Component library
pnpm exec nx g @nx/react:library <name> --directory=libs/ui
# Standalone component
pnpm exec nx g @nx/react:component <Name> --project=<lib>
# Custom hook
pnpm exec nx g @nx/react:hook use<Name> --project=<lib>
# Redux slice
pnpm exec nx g @nx/react:redux <name> --project=<lib>
|
Options:
| Option |
Values |
Default |
--style |
css, scss, styled-components, emotion, none |
css |
--routing |
flag |
- |
@nx/node - Node.js Applications
Use Cases: REST APIs, GraphQL servers, CLI tools, background workers
1
| pnpm exec nx g @nx/node:application <name> --directory=apps
|
Options:
| Option |
Values |
Default |
--framework |
express, fastify, koa, nest, none |
none |
--docker |
flag |
- |
--e2eTestRunner |
jest, none |
jest |
@nx/jest - Testing Configuration
Use Cases: Add testing to existing projects
1
| pnpm exec nx g @nx/jest:configuration <project>
|
@nx/workspace - Workspace Utilities
Use Cases: Monorepo management, project restructuring
1
2
3
4
5
6
7
| # Move project
pnpm exec nx g @nx/workspace:move \
--projectName=<lib> \
--destination=libs/<path>
# Convert to monorepo
pnpm exec nx g @nx/workspace:convert-to-monorepo
|
Optional Generators
Install as needed:
| Plugin |
Install |
Use Case |
@nx/next |
pnpm add -D @nx/next |
Next.js SSR/static sites |
@nx/remix |
pnpm add -D @nx/remix |
Remix web applications |
@nx/nest |
pnpm add -D @nx/nest |
NestJS enterprise backends |
@nx/express |
pnpm add -D @nx/express |
Lightweight REST APIs |
@nx/expo |
pnpm add -D @nx/expo |
React Native mobile apps |
@nxlv/python |
pnpm add -D @nxlv/python |
Python backends, ML models |
Quick Reference Matrix
| Need |
Generator |
Command |
| Shared utilities |
@nx/js:library |
just ai-scaffold name=@nx/js:library |
| React component |
@nx/react:component |
nx g @nx/react:component <Name> |
| React library |
@nx/react:library |
just ai-scaffold name=@nx/react:library |
| Custom hook |
@nx/react:hook |
nx g @nx/react:hook use<Name> |
| Node.js API |
@nx/node:application |
nx g @nx/node:application api |
| Next.js app |
@nx/next:application |
nx g @nx/next:application web |
| Python API |
@nxlv/python:application |
nx g @nxlv/python:application api --type=fastapi |
Best Practices
1. Use Hierarchical Directory Structure
1
2
3
4
5
| # âś… Good: Domain-organized
pnpm exec nx g @nx/js:library user-service --directory=libs/domain/user
# ❌ Avoid: Flat structure
pnpm exec nx g @nx/js:library user-service
|
2. Preview Before Executing
1
| pnpm exec nx g @nx/react:component Button --dry-run
|
3. Follow Generator Conventions
- Don’t fight the generated structure
- Use Nx conventions (
project.json, tsconfig.json)
- Customize post-generation, not during
- REF-004: Nx Generator Scaffolding Standards
- SDS-045: VibesPro™ Foundation Integration