| Next.js 5 Improves Webpack Support |
| Written by Kay Ewbank |
| Friday, 16 February 2018 |
|
The latest version of Next.js has been released with better server-side Webpack support and first-class TypeScript support. Next.js is a toolkit for universal, server-rendered (or statically pre-rendered) React.js applications. The improved Webpack support means that Webpack now works universally with Next.js applications; until now, it would only execute on the client (browser) bundles, meaning developers couldn't use Webpack with Next.js for server-rendering. The developers say they have extensively refactored the codebase to make Webpack work universally. The second improvement to the new version is the ability to import CSS files and make use of Webpack loaders. The developers say: "Instead of enabling every conceivable feature and loader by default, we are introducing Next.js plugins, which are simple functions that decorate your configuration."
The plan is to develop an ecosystem of practical simple extensions, and the developers have opened the next-plugins monorepo for the Next.js community to maintain.
The increasing use of TypeScript by JavaScript developers is behind the announcement that TypeScript will be officially supported by Babel 7, meaning that developers will be able to use it from Next.js thanks to Next.js' use of Babel. However, the developers point out that because of the new Universal Webpack support, this offers another way that full TypeScript support is included in Next.js.
Support for React Altlibs and Module Overloading have also been improved in the new version. This means you can use some of the replacement drop-in implementations of React such as preact, nervjs and inferno, or react-dom-lite if you want to use a replacement DOM renderer. The new support again comes from the Universal Webpack support.
Perhaps the most interesting addition to the new version is support for Zones, a technique that lets you develop and deploy separate apps, but then merge multiple apps into a single one that your customers can browse using a single URL. A zone is a single deployment of a Next.js app, and you can have multiple zones that can then be merged as a single app. The documentation says that the concept is exactly the same as microservices, but for frontend apps. Behind the scenes, zones rely on configuration of the backend routing layer or load balancers that expose the apps to the world. You create the zone using normal <Link> components. A proxy is also needed, and the developers have released a node package called microproxy. However, zones can also be used with existing proxy solutions.
|
| Last Updated ( Friday, 16 February 2018 ) |
More Information
