BT

Universal React Framework Next.js Releases Version 5.0

| by Kevin Ball Follow 3 Followers on Feb 09, 2018. Estimated reading time: 2 minutes |

A note to our readers: You asked so we have developed a set of features that allow you to reduce the noise: you can get email and web notifications for topics you are interested in. Learn more about our new features.

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.

Rate this Article

Adoption Stage
Style

Hello stranger!

You need to Register an InfoQ account or or login to post comments. But there's so much more behind being registered.

Get the most out of the InfoQ experience.

Tell us what you think

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread
Community comments

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Allowed html: a,b,br,blockquote,i,li,pre,u,ul,p

Email me replies to any of my messages in this thread

Discuss

Login to InfoQ to interact with what matters most to you.


Recover your password...

Follow

Follow your favorite topics and editors

Quick overview of most important highlights in the industry and on the site.

Like

More signal, less noise

Build your own feed by choosing topics you want to read about and editors you want to hear from.

Notifications

Stay up-to-date

Set up your notifications and don't miss out on content that matters to you

BT