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.

nextjs More Information

Learn Next.js

Next.JS On GitHub

Related Articles

TypeScript 2.7 Improves Type Inference

The Programmers Guide To React

React 16 Adds Fragments

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on, Twitter, FacebookGoogle+ or Linkedin.



New Look For Amazon Developer Console

Amazon has provided a new user interface for the Developer Portal console to give devs easy access to popular services together with quick links to technical documentation, support, and search.

TimescaleDB Production Ready

TimescaleDB, an open-source PostgreSQL extension for time-series that is optimized for fast ingest and complex queries, has been released as production ready by its developers.

More News






or email your comment to:

Last Updated ( Friday, 16 February 2018 )