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.
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.
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.
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.
To know more about these and other features in detail, visit the Next.js 7 blog.
Read Next
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
