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 Gatsby, Next.js, and React Native.

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:

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

Distributed Graph-Based Task Executions 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, andit 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.

Distributed Graph-Based Task Execution and Computation Caching illustration

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.

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.

Nx Integrated Development Experience illustration

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:

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