Next.js 11, Webpack 5 for Web/Node, Streamlined Jest config, and more in Nx 12.6!

Nx 12.6 includes many fixes, and new features, including Next.js 11, Webpack 5 support for Web/Node, streamlined Jest configs, and more!

Nx is a smart, extensible build framework to help you architect, test, and build at any scale - integrating seamlessly with modern technologies and libraries while providing a robust CLI, computation caching, dependency management, and more.

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

Nx Conf is coming in September!

Nx Conf is a new, online & free-to-attend, 2-day conference featuring members of the Nx team and community. Join us as we share our ideas and expertise about making development faster, more scalable, and more collaborative.

In addition to the conference there will be a 2-day workshop on September 14th and 15th on How to Develop at Scale with Nx Monorepos, presented by members of the Nx Core Team. Workshop registration is $800 per attendee.

Grab your FREE Nx Conf ticket and save your workshop seat today!

Next.js 11 Support

Conformance: A system that provides carefully crafted solutions to support optimal UX.

Improved Performance: Further optimizations to improve cold startup time so you can start coding faster. next/script: Automatically prioritize loading of third-party scripts to improve performance. next/image: Reduce layout shift and create a smoother visual experience with automatic size detection and support for blur-up placeholders.

Webpack 5: Now enabled by default for all Next.js applications, bringing these benefits to all Next.js developers.

Create React App Migration (Experimental): Automatically convert Create React App to be Next.js compatible.

Next.js Live (Preview Release): Code in the browser, with your team, in real time.

Nx now fully supports Next.js 11 with Webpack 5 for existing and new workspaces. Check out our latest Nx Office Hours session on building your website with Next.js

Webpack 5 support for Node/Web

We now fully support Webpack 5 across all first-party ecosystems. In Nx 12.6, existing workspaces may opt into Webpack 5 support. Webpack 5 will be the default in Nx 13. To opt into Webpack 5, run the following generator:

This adds Webpack and the updated Webpack plugins to the package.json, which is used when building Web and Node applications. If you don't have a custom Webpack config, you should be able to migrate with no issues. If you do have a custom Webpack config, we recommend trying to migrate and making necessary changes to your config before Nx 13. Read more in the Webpack 5 migration guide.

Easier configuration for Jest 

Previously in Nx workspaces, configuring Jest required keeping a list of all projects in the jest.config.js. This often became an issue when moving projects around or removing projects. This caused outdated projects to remain in the Jest config and caused it to be out of sync with the projects in the workspace.

Now with Nx 12.6, we've introduced the getJestProjects helper function to read all the projects in the workspace.

This eliminates the need for users to maintain this list separately in the Jest config and ensures that it stays in sync.

Other Highlights

Improved Jest 27 support for using jest-circus as the default test runner.

Refreshed guides and documentation.

Usability improvements with per-project configuration.

TypeScript updated to version 4.3.x.

Angular updated to version 12.1.x.

How to Update Nx

Updating Nx is done with the following command, and will update your Nx workspace dependencies and code to the latest version:

After updating your dependencies, run any necessary migrations.

Explore More

Get our free basic Nx workspaces course on YouTube!

Purchase our premium video course on advanced practices for Nx workspaces: here!

Be sure to click the ❤️ so other people will see it. Follow us on Twitter, and subscribe to the YouTube Channel for more information on Angular, React, Nx, and more!

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.