Next.js, an open source toolkit for universal React.js applications, has reached version 5.0. This release improves configurability of Next.js applications, adding better server-side webpack support and a plugin system for modular configuration. It also adds first-class TypeScript support, better support for React alt-libs like Preact, and a multi-application composition feature called Zones.
Next.js has supported custom webpack configurability from its initial release, but the latest release overcomes some major limitations. In the version 5 release post, Next.js developers Tim Neutkens and Arunoda Susuripala explain:
Webpack would only execute on the client (browser) bundles, and you would miss out on the possibility of using this great toolchain for server-rendering.
We are happy to announce that we have extensively refactored our codebase to make Webpack work universally.
From your perspective, all that changes is that an additional isServer property is passed to the decorator function above. However, the new semantics mean that the broad ecosystem of Webpack loaders are now available for you to use.
This functionality enables much more control over configuration of Next.js, and to provide a simple way to manage that configuration Next.js has created a plugin system for configuration, and set up an open source repository of common reusable plugins. At the time of writing, available plugins included configuration for importing css, less, and scss, as well as configuring the project to use Preact or TypeScript. The community is already jumping in with open pull requests to add plugins for features like GraphQL tags and the webpack bundle analyzer.
The plugin architecture is what enables first class TypeScript support in Next.js, making it take only two simple lines of code to begin using TypeScript in Next.js applications:
const withTs = require('next-typescript');
module.exports = withTs({ /* additional config*/ })
In a post on the React etc blog, Jorgé reacted:
Next.js is continuing on the path of responding to users' request to provide useful features. This is yet another testament to how TypeScript is taking JavaScript community by storm. Not only by offering typing and additional language features, but super powerful debugging and refactoring capabilities.
As TypeScript plays great with React, this will provide an improved development experience for Next.js development.
Next.js 5.0 also adds a feature called ‘Zones’, which according to the documentation allows the merging of multiple Next.js applications into a single application:
This is exactly the same concept as microservices, but for frontend apps.
The feature combines with a proxy and allows you to use React <Link> tags that link separate applications, creating a seamless integration across what would otherwise be separate applications. To facilitate easy development and deployment, the team has released a node package called microproxy, but the feature also plays nicely with traditional proxy solutions like NGINX and HAProxy.