The Next.js framework for server-rendered "universal" JavaScript apps is going open source.
Built on top of the React JavaScript library, the webpack module bundler and the Babel JavaScript compiler, Next.js is a minimalistic framework for server-rendered React applications. It's offered by development tools builder Zeit and installed via npm "We created Next.js because we believe universal isomorphic applications are a big part of the future of the web," Next's developers said.
For many years, the Next team has been pursuing its vision of universal JavaScript apps. "Node.js led the way, by enabling code-sharing between client and server, broadening the contribution surface for many developers around the world," the developers said. "Many attempts were made to make it practical to develop apps and websites on Node. Many template languages and frameworks came along, but the technical divide between front end and back end remained." If developers, for example, used Express and Jade, some HTML would be rendered by the server while a different code base powered by jQuery, perhaps, would take over.
React offers a model in which the render function returns the UI representation based on data available at that point in time. But Next's developers said that this wasn't sufficient because it lacked a component lifecycle. "Lifecycle hooks allow us to handle the continuation of some rendering that originated on the server," the developers said. "You can start with a static representation of data, subscribe to real-time updates from a server and change it over time, for example. Or perhaps it just remains static." Next.js, they said, was their take on how to bring this vision forward.
Next.js is based on six basic principles: zero setup and using the file system as an API; only using JavaScript, with everything acting as a function; automatic server-rendering and code-splitting; data-fetching is up to the developer; anticipation is the key to performance; and simple deployment. It features a pages subdirectory where top-level components live, and routes are all based on ES6 modules that export a function or a class that extends from React.component. With this approach, the system remains compose-able and testable.
For performance, Next.js tries to bring the best of the "fully server-rendered" and "single-page app, nothing server-rendered" realms. "For www.zeit.co, we've implemented a technique on top of Next.js that brings us the best of both worlds: every single <Link /> tag pre-fetches the component's JSON representation on the background, via a ServiceWorker. " Also featured is CSS-in-JS using the glamor library, providing CSS capabilities without the need for parsing and compilation. With Next.js, large teams can collaborate on components with varying business and technical requirements as well.
Future plans for Next.js call for support for pluggable renderers, better JSX, and custom Babel and webpack configuration.
This story, "Next step after Node.js is a framework for 'universal' JavaScript apps" was originally published by InfoWorld.