Nx and React
Nx is a smart and extensible build framework to help you develop, test, build, and scale with React and React frameworks like Next.js, React Native, and Gatsby.
Nx provides a holistic dev experience powered by an advanced CLI and editor plugins.
Develop your applications using your preferred React frameworks, mix and match them, without losing the rich support for Storybook, Cypress, Jest, ESLint and more.
Nx uses distributed graph-based task execution and computation caching. Keep your CI and local dev experience fast as your repository grows.
Nx can be added to any React project in minutes.
Create a React Workspace with Nx
Get started right away by creating a new React workspace by running the following command in your Terminal or Command prompt:
For Next.js users you can use:
Refer to our Next.js guide to get started.
Once you’ve created your React workspace, follow the steps in this tutorial to learn how to add testing, share code, view dependency graphs, and much, much more.
If you want to add Nx to an existing React project, check out these guides for "Create React App" migration or "Adding Nx to Yarn/Lerna monorepo" migration
Best-in-Class Support for Monorepos
Nx provides distributed graph-based task execution and computation caching.
Nx is smart. It analyzes your workspace and figures out what can be affected by every code change. That's why Nx doesn't rebuild and retest everything on every commit — it only rebuilds what is necessary.
Nx partitions commands into a graph of smaller tasks. Nx then runs those tasks in parallel, and it can even distribute them across many machines without any configuration.
Nx also uses a distributed computation cache. If someone has already built or tested similar code, Nx will use their results to speed up the command for everyone else.
Rich Plugin Ecosystem
Nx is an open platform with plugins for many modern tools and frameworks.
It has support for TypeScript, React, React Native, Cypress, Jest, Prettier, Nest.js, Next.js, Gatsby, Storybook, Ionic, Go, Rust among others. With Nx, you get a consistent dev experience regardless of the tools used.
- Use Nx's Storybook and Cypress plugins to build design systems.
- Use Next.js, Gatsby, React Native and share code between them.
Nx Integrated Development Experience
Nx provides a modern dev experience that is more integrated. Nx adds a high-quality VS Code plugin which helps you use the build tool effectively, generate components in folders, and much more.
Nx also supports optional free cloud support with Nx Cloud as well as GitHub integration. Share links with your teammates where everyone working on a project can examine detailed build logs and get insights about how to improve your project and build.
Ready to dive in?Start using Nx with React today.
Learn More About Nx
To learn more about Nx and how Nx can increase your dev and build efficiency and modernize your apps stack, check out the following resources:
- Nx React Documentation
- Nx Next.js Documentation
- Free Nx Workspaces video course
- Nx Explainer: Dev Tools for Monorepos, In-Depth with Victor Savkin
- Tune into regular Nx Office Hours livestreams
- Nx Cloud
You can also follow Nx Dev Tools on Twitter to keep up with latest news, feature announcements, and resources from the Nx Core Team.
Join the ecosystem of Nx users