Next.js 11, Webpack 5 for Web/Node, Streamlined Jest config, and more in Nx 12.6!
Tags: nx, nextjs, webpack, testing
Published: 2021-07-22 18:05:49

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](https://nx.dev/angular), [nx.dev/react](https://nx.dev/react), and [nx.dev/node](https://nx.dev/node).

---

## Nx Conf is coming in September!

![Nx Conf logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oc508ozllaqjeva79dt4.jpeg)

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](https://ti.to/nrwl/nx-conf-2021?utm_source=devto) and save your workshop seat today!

---

## Next.js 11 Support

[Next.js 11](https://nextjs.org/blog/next-11) was recently announced with a ton of cool features, including these highlights from the Next.js blog:

- 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

{% youtube vMzucVwZdRc %}

---

## Webpack 5 support for Node/Web

![Webpack logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ff835ivna0qdiqms4wcq.jpeg)

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:

```sh
nx g @nrwl/web:migrate-to-webpack-5
```

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](https://nx.dev/latest/react/guides/webpack-5).

---

## 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.

{% gist https://gist.github.com/brandonroberts/8577ef46b8d72d5b8789ce9e584d773e %}

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](https://dev.to/nx/per-project-configuration-storybook-support-for-angular-12-auto-refresh-for-dependency-graph-and-more-in-nx-12-5-3c8f).
- 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:

```sh
nx migrate latest
```

After updating your dependencies, run any necessary migrations.

```sh
nx migrate --run-migrations
```
---

## Explore More

- Get our [free basic Nx workspaces course on YouTube](https://youtu.be/2mYLe9Kp9VM)!
- Purchase our premium video course on advanced practices for Nx workspaces: [here](https://nxplaybook.com/p/advanced-nx-workspaces)!

---

Be sure to click the :heart: so other people will see it. Follow us [on Twitter](https://twitter.com/NxDevTools), and subscribe to the [YouTube Channel](https://youtube.com/nrwl_io?sub_confirmation=1) for more information on [Angular](https://angular.io), [React](https://reactjs.org), [Nx](https://nx.dev), 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](https://nrwl.io/services/consulting).