Next.js with Relay Modern for GraphQL in Universal React apps

Developers creating apps using Next.js application and site development often requires the use of a backend API to provide a dynamic source of data, instead of relying on local static files. Traditionally this type of backends have been built using various libraries using the REST architectural pattern.

GraphQL is the data transfer protocol that is an alternative approach to REST APIs. As a complete specification (Query Language + server implementation) it is more guiding than an architectural direction like REST is. Originally created by Facebook for their mobile applications, GraphQL will not replace REST APIs everywhere, but for many use cases is is a valid option for client-server comms.

There is no shortage of articles comparing how REST compares to GraphQL, so for the remainder of this article I will focus on the usage of GraphQL with Next.js, rather than making the decision between them.

Relay Modern is a second generation GraphQL client

Like the React ecosystem is supported by countless libraries (and frameworks like Next.js), there are plenty of supporting technologies for GraphQL. Server implementations of GraphQL all provide the functionality of the reference GraphQL implementation written in their respective programming languages from Ruby to Java to PHP. There is variance of supported features, but the domain is clear.

-- Jani Tarvainen, 28/08/2017