Next.js 7 framework compiles faster, supports WebAssembly

Zeit’s open source Next.js framework for static and server-rendered React applications compiles faster and improves error reporting with the new Version 7 release. Support for the WebAssembly binary format—via the Webpack 4 module bundler—is a key addition as well.

The new features in Next.js Version 7

Next.js 7 boots up 57 percent faster during development, Zeit says, thanks to optimizations in the code base and the use of both Webpack 4 and the Babel 7 JavaScript compiler. And an incremental compilation cache lets code changes build 40 percent faster.

For debugging, Next.js 7 uses react-error-overlay to improve the stack trace with accurate locations for server and client errors. Source highlights are provided for context. It also is now easier to open a text editor by clicking on a specific block of code.

By being powered by Webpack 4, Next.js 7 gains the following benefits:

• Server-rendering of WebAssembly, which provides a binary format to improve web application performance.
• Code-splitting boosts.
• Support for .mjs source files.
• Better “tree-shaking,” via the removal of unused code.
• For CSS imports, a new way of extracting CSS bundles. New versions of several Next.js plugins solve issues related to CSS imports.
• Dynamic imports have been standardized.

The initial HTML payload has been optimized, reduced by 7.4 percent to 1.5KB, making pages leaner.

Next.js supports the new React context API between ‘pages/_app.js’ and page components. Previously, developers could not use React context in between pages on the server side. A custom Webpack plugin changes this behavior to share module instances between pages. This allows use of the React context while also reducing the Next.js memory footprint when sharing code between pages.

Where to download Next.js

You can download Next.js from GitHub. Next.js also can be installed from NPM via npm install --save next react react-dom.