Next.js 2.0 plays better with React and JavaScript

Next.js, a minimalist framework for server-rendered React applications, has moved to a 2.0 release focused on enabling smaller apps and making it easy to use React.

Developers can place React components in a pages directory and, by then run next to get automatic code-splitting, routing, hot code reloading, and universal server- and client-side rendering. This plays well with the rest of the React and JavaScript (NPM) ecosystems.

Next.js 2.0 also changes how builds work, resulting in smaller and more efficient apps, the developers said. Webpack common chunks have been set up to avoid shipping repeated code across components, and page loads have been made faster through the use of hashes so initial bundle files on clients are cached permanently. Other provisions were made to ensure an app works correctly.

With the programmatic API in Next.js 2.0, developers use can boot a custom server and take control over the routing and rendering pipeline, thus enabling features like fancy URLs or custom caching schemes. Component CSS support, meanwhile, has the next/css capability deprecated in deference to styled-jsx, which is a Babel transformation providing isolated CSS support. Along with React, the Babel JavaScript compiler and Webpack module bundler have served as underpinnings of Next.js.

Version 2.0 also offers a more scalable replacement for HMR (Hot Module Replacement). “We deployed a new lazy compilation mechanism that only subscribes to the pages that you’re actually working on — i.e.: all the component trees currently rendered,” developers said in a bulletin about the new version. “In our tests, this has made compilation 10 to 20 times faster for large projects.”

Plans for an upcoming Next.js 3.0 release include improved HMR, faster compilation, and ensuring Next.js works with React Fiber, a re-implementation of React’s core algorithm geared to accommodate animation, layout, and gestures. “This will potentially introduce new opportunities, like the ability to stream HTML from the server as it is generated,” Next.js developers said.

The developers of Next.js also are showing a Next.js-based clone of the Hacker News technology news feed. “Our implementation, Next News, is fully server-rendered, queries the data over Firebase and updates in real time as new votes come in.”