Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon

Next.js 7, a framework for server-rendered React applications, releases with support for React context API and Webassembly

Save for later
  • 4 min read
  • 20 Sep 2018

article-image

Yesterday, the Next.js researchers announced that the latest version--v7-- of its React Framework is now production-ready. The Next.js 7 has had 26 canary releases and 3.4 million downloads so far.

Alongwith the 7th version release, they have also launched a completely redesigned nextjs.org. This version is power-packed with faster boot and re-compilation improvements, better error reporting, static CDN support and much more.

Key highlights of the Next.js 7

DX Improvements


The Next.js 7 includes many significant improvements to the build and debug pipelines. With the inclusion of webpack 4, Babel 7 and improvements and optimizations on the codebase, Next.js can now boot up to 57% faster during development.

Also, due to the new incremental compilation cache, any changes made by the user into the code will build 40% faster.

While developing and building users will now see a better real time feedback with the help of webpackbar.

next-js-7-a-framework-for-server-rendered-react-applications-releases-with-support-for-react-context-api-and-webassembly-img-0

Better error reporting with react-error-overlay


Until now, users would render the error message and its stack trace. From this version, react-error-overlay has been used to enrich the stack trace with:

  • Accurate error locations for both server and client errors
  • Highlights of the source to provide context
  • A full rich stack trace


react-error-overlay makes it easy to open the text editor by just clicking on a specific code block.

Upgraded compilation pipeline: Webpack 4 and Babel 7

Webpack 4


This version of Next.js is now powered by the latest webpack 4, with numerous improvements and bugfixes including:

  • Support for .mjs source files
  • Code splitting improvements
  • Better tree-shaking (removal of unused code) support


Another new feature is WebAssembly support. Here’s an example of how Next.js can even server-render WebAssembly.

With webpack 4, a new way of extracting CSS from bundles called mini-extract-css-plugin is introduced. @zeit/next-css, @zeit/next-less, @zeit/next-sass, and @zeit/next-stylus are now powered by mini-extract-css-plugin.

Unlock access to the largest independent learning library in Tech for FREE!
Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.
Renews at €18.99/month. Cancel anytime

Babel 7


Next.js 7 now uses the stable version of Babel (Babel 7). For a full list of changes in Babel 7, head over to its release notes.

Some of the main features of Babel 7 are:

  • Typescript support, for Next.js you can use @zeit/next-typescript
  • Fragment syntax <> support
  • babel.config.js support
  • overrides property to apply presets/plugins only to a subset of files or directories

Standardized Dynamic Imports


Starting with Next.js 7, it no longer has the default import() behavior. This means users get full import() support out of the box.

This change is fully backwards-compatible as well. Making use of a dynamic component remains as simple as:

import dynamic from 'next/dynamic'
const MyComponent = dynamic(import('../components/my-component'))
export default () => {
  return <div>
    <MyComponent />
  </div>
}

Static CDN support


With Next.js 7 the directory structure of .next is changed to match the url structure:

https://cdn.example.com/_next/static/<buildid>/pages/index.js
// mapped to:
.next/static/<buildid>/pages/index.js


While researchers also recommend using the proxying type of CDN, this new structure allows users of a different type of CDN to upload the .next directory to their CDN.

Smaller initial HTML payload


As Next.js pre-renders HTML, it wraps pages into a default structure with <html>, <head>, <body> and the JavaScript files needed to render the page.

This initial payload was previously around 1.62kB. With Next.js 7 the initial HTML payload has been optimized, it is now 1.5kB, a 7.4% reduction, making your pages leaner.

next-js-7-a-framework-for-server-rendered-react-applications-releases-with-support-for-react-context-api-and-webassembly-img-1

React Context with SSR between App and Pages


Starting from Next.js 7 there is support for the new React context API between pages/_app.js and page components.

Previously it was not possible to use React context in between pages on the server side. The reason for this was that webpack kept an internal module cache instead of using require.cache. The Next.js developers have written a custom webpack plugin that changes this behavior to share module instances between pages.

In doing so users can not only use the new React context but also reduce Next.js's memory footprint when sharing code between pages.

next-js-7-a-framework-for-server-rendered-react-applications-releases-with-support-for-react-context-api-and-webassembly-img-2

To know more about these and other features in detail, visit the Next.js 7 blog.

low.js, a Node.js port for embedded systems

Browser-based Visualization made easy with the new P5.js

Deno, an attempt to fix Node.js flaws, is rewritten in Rust