BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Next.js Offers Simple Universal JavaScript Framework Based on React

Next.js Offers Simple Universal JavaScript Framework Based on React

A new universal JavaScript framework dubbed Next.js has been open-sourced, providing another option for React- and server-based web apps.

The team at Zeit built Next.js on a React foundation and its component model, along with a key extension: using a component lifecycle hook called getInitialProps(), the framework can do initial rendering on the server and continue rendering on the client as needed. But this advanced feature is a bonus on top of a small, yet highly capable framework.

At its minimum, Next.js provides an easy way to spin up a new web app without requiring a lot of tool set setup. Similar to create-react-app, installing the framework sets up a build process built upon React, Webpack, and Babel. Developers used to writing React components create pages based on the React syntax with each page providing a render function:

import React from 'react'
export default () => 
Hello world!

Next.js uses the filesystem as the API, so every component that is put into the pages folder is automatically mapped to a server-based route. For example, the component on disk at pages/about.js is automatically served up at the URL /about.

Unlike a project like express-react-views, which is a view engine built on top of Express, next.js is a top-level server and only renders the results of JavaScript functions. To that end, the project uses glamor to handle CSS rather than rely on standalone CSS files.

Every route within Next.js is simply a ES6 module that exports a function or class that extends from React.Component.

The opinionated nature of Next.js has some subtle advantages, one of which is that the developer doesn't have to spend any time setting up Webpack or Babel configurations. Those two steps alone have wasted many developer hours. To run a development version of the site, run npm run dev.

Universal JavaScript is still a more advanced technique for some dev teams and many frameworks have their own implementations. Angular 2 has Universal Angular 2 and Ember has Fastboot. In the React world, there is no shortage of options such as Walmart's Electrode and Redfin's React Server. For now, Next.js is a simple option with plenty of potential. The project is on GitHub.

Rate this Article

Adoption
Style

BT