BT

InfoQ Homepage News Next.js 7 Released with 40% Faster Builds

Next.js 7 Released with 40% Faster Builds

This item in japanese

This item in chinese

Bookmarks

The Next.js team has announced version 7 of their open-source React framework. This release of Next.js focuses on improving the overall developer experience with 57% faster boot times and 40% faster builds in development, improved error reporting and WebAssembly support.

Next.js is a React framework whose primary goal is to provide great performance in production, along with a great developer experience. In order to provide this great developer experience, Next.js supports server-side rendering, code splitting and client-side routing out the box.

Next.js is built on many industry standard tools within the JavaScript ecosystem such as Babel and Webpack, and with version 7 comes the latest versions of these tools. These upgrades along with a new incremental compilation cache means that Next.js compilations are now 40% faster, a basic application will see compilation reduce from 304ms to 178ms.

With the Webpack upgrade, Next.js 7 benefits from the new .mjs support allowing for all the common JavaScript modules such as CommonJS, AMD and ESM to be bundled, but also support for EcmaScript, JSON and WebAssembly modules too.

Next.js 7 also bundles the latest version of Babel which brings support for TypeScript, fragment syntax, and experimental auto-polyfilling.

Initial payload sizes in Next.js 7 have been decreased by as much as 7.4%, taking a document size in previous versions of Next.js from 1.62kB to 1.50kB. These improvements have come from the Next.js team removing certain HTML elements and minifying some inline scripts.

Another major improvement with Next.js 7 is its support for the React Context API. The Context API is a way to share data across React components without having to explicitly share it every time. In Next.js this reduces memory usage by 16% due to Next.js's ability to share code between pages.

Next.js 7 supports dynamic importing of modules; previously this was not possible due to Next.js rolling its own import functionality. They've now removed that and support default import functionality that comes out the box with Webpack, allowing dynamic imports, naming and bundling of files.

Next.js has received lots of praise within the community. reacttricks on Reddit says, "I've been using Next.js exclusively for all projects in the last year and a half, I'd recommend everyone to try it.". Other feedback includes confusion on what Next.js is; theineffablebob asks, "Next just a framework that includes everything you need to get a site up and running? Is it sorta like one of those boilerplates?" Nextjs.org considers itself the PHP of the JavaScript and React world in this quote from nextjs.org: "Think about how webapps are created with PHP. You create some files, write PHP code, then simply deploy it. We don't have to worry about routing much, and the app is rendered on the server by default.".

You can get the latest version of Next.js from the Next.js website.

Rate this Article

Adoption
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.

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

Community comments

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

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

BT

Is your profile up-to-date? Please take a moment to review and update.

Note: If updating/changing your email, a validation request will be sent

Company name:
Company role:
Company size:
Country/Zone:
State/Province/Region:
You will be sent an email to validate the new email address. This pop-up will close itself in a few moments.