Improved Next.js support, auto-populated publishable library dependencies, and more in Nx 9.3!

Today, we are happy to announce the release of Nx 9.3 that includes many new features, including improved Next.js support!

Nx is a set of Extensible Dev Tools for Monorepos, which we developed at Nrwl based on our experience working at Google and helping Fortune 500 enterprises build ambitious applications at scale.

If you aren’t familiar with it, learn about Nx at nx.dev/angular and nx.dev/react.

Improved Next.js Support

Next.js is a framework to build server-rendered applications, static websites, and more using React. When building large applications at scale, server-rendered applications can be a challenge. Nx has continued to improve support for Next.js in a few key areas:

• Support for custom next config.
• Support for building, and serving the production server.
• New schematics for generating pages, and components.

There have also been many bug fixes to enhance the developer experience when using Next.js within an Nx workspace.

Read more about the Nx plugin for Next.js in our Next.js plugin guide. Also check out the blog post on deploying Next.js apps using Nx.

Auto-populated publishable library dependencies

Nx provides developers built-in support for publishing libraries directly to npm from within an Nx workspace. As you start to add external dependencies to your library, you also have to remember to manage the dependencies that need to be installed with the library. This information is already available in the package.json in your workspace. To make this easier, Nx now populates your package.json with the dependencies your library depends on at build time! No more manually copying, and pasting versions, and making sure your versions are sync with the version in your workspace. You still run the same nx build my-lib command to prepare your library for publishing.

Improved Storybook Support for React

Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

Initial support for Storybook for React added the ability to generate Cypress configuration. We’ve enhanced the support for Storybook and React in a few key areas.

• Includes a schematic for generating a story for a single component, and for generating stories for components of an entire library.
• Improved support for JS-based stories
• Also fixes issues with proper detection of default component export, Babel dependencies, and JS-only specs.

Read more about the Storybook for React integration in our Nx Storybook plugin guide.

Nx Console

Nx Console, the GUI for the Nx CLI, has also released version 12.0.0. This release includes a few important bug fixes, and improvements including a section for command Nx commands. Watch a guided walkthrough of using Nx Console within an Nx workspace using the Angular plugin.

Nx Console also works within in Nx workspace using other plugins, such as React, Node, and Next.js.

Updates to latest libraries

We’ve also updated the following packages to their latest release versions:

• Angular framework — 9.1.0
• Angular CLI and DevKit — 9.1.0
• Cypress — 4.x
• Jest — 25.x
• NgRx — 9.1.0
• Prettier — 2.0.4
• React — 16.10.x
• Redux Toolkit — 1.3.x
• TypeScript — 3.8.x

Each release also includes bug fixes, additional minor features, and build improvements. For more information about the release, see our releases page.

How to Update Nx

Each release of Nx also contains additional minor features, and bug fixes. Releases of the Angular framework, Angular CLI, NgRx libraries, React, and Redux Toolkit were also updated.

Updating Nx can be done with the following commands, and will update your dependencies and code to the latest version:

yarn update

Or for npm

npm run update

Speed up development with the new Nx Cloud!

Speed up your builds and tests by up to 90%! Nx Cloud provides a distributed computation cache to speed up build, test and lint commands. Turn it on without changing anything in your Nx workspace and instantly get the benefits.

• Run CI up to 90% faster.
• Never build or test the same code twice. If someone else within your organization already built a project, you can get the result from the Nx Cloud cache.
• Get advanced insights about your build process to improve your team’s velocity.

Sign up for Nx Cloud at Nx.app!

New video course for Nx Workspaces!

We also recently launched a brand new premium video course on advanced practices for Nx workspaces. You can get it here!

We also have a free Nx workspaces course on youtube, where you’ll find all you need to know to get started with Nx! Instructor and Nrwl consultant, Isaac Mann, takes you through 5-minute video sessions on specific topics for a total of 30 minutes of learning time. You’ll learn how an Nx workspace enables you to do more with your Angular and React apps and take advantage of the tool:

• Out-of-the-box configuration for modern frameworks and tooling
• Easy code-sharing with enforced API boundaries
• Dependency-graph-aware tooling that allows you to run commands only on the code affected by a particular change
• Ensure that Angular and React apps and their backend code all live happily in the same monorepo

Explore More

• How to never build or test the same code twice
• Using Nx to Scale React development (video)
• Dev Tools for Monorepos, In-Depth (video)
• Nx Community Plugins
• Get our free basic Nx workspaces course on youtube!
• Purchase our premium video course on advanced practices for Nx workspaces: here!

As always, if you are looking for enterprise consulting, training and support, you can find out more about how we work with our clients here.

If you liked this, click the 👏 below so other people will see this here on Medium. Follow Brandon Roberts and @nrwl_io to read more about Nx and Nrwl. Also follow Brandon, Nx, and Nrwl on Twitter!