A popular universal React framework, Next.js, has released version 2.0, adding necessary features while trying to keep it simple.
Version 1 was basic and straightforward, but didn't allow for some slightly advanced- though common- scenarios. With simplicity as a guiding principle, Next.js automatically adds pages to the route table just by placing a React component in the pages directory. While this is undeniably easy on developers, there was no mechanism for custom routing and URLs. Version 2 maintains the default behavior but now allows developers to use their own server code.
A common stumbling point for new React developers happens when they try to apply CSS styles to their component. React uses its own style language, so developers accustomed to writing typical CSS will often run into bugs. To solve this, Zeit introduced their own CSS-and-JSX mashup, dubbed styled-jsx. This allows developers to, inside their React components, write standard CSS that only applies to that component. Next.js uses a custom Babel transform to transpile styled-jsx into a form React requires.
At React Conf 2017, Zeit CEO Guillermo Rauch described why one would choose Next.js:
There's an opportunity to make starting with React development much easier, but at the same time, there's an opportunity to make it really, really simple. A lot of what it's trying to do is merging worlds of how the web used to work with all the new exciting possibilities that heavy and fat clients come with.
Next.js isn't yet another new JavaScript framework; it's one of a growing number of tools that reduces the complexity of building apps based on React. Instead of giving the developer unlimited options, it exists as a set of pre-made decisions. The challenge for the team is in balancing the simple with the needs of more advanced developers.
To see more about Next.js, check out the project on GitHub.
