Create a server-side rendering GraphQL client with Next.js and Apollo Client

In this post, we will use Next.js and Apollo Client to create a server-rendering GraphQL Client.

View the source for this project here: https://github.com/tomanagle/apollo-example

Firstly, create a Next.js application with the npx command:

npx create-next-app apollo-example
cd apollo-example
yarn dev

Add all the required dependencies for the project:

yarn add @apollo/react-hooks apollo-cache-inmemory apollo-client apollo-link-http graphql graphql-tag isomorphic-unfetch next-with-apollo

Create a client configuration that we going to pass to the provider. This is where you will configure all your Apollo Client options.

Docs: https://www.apollographql.com/docs/react/api/apollo-client/

Next.js wraps your entire application in an App component to persist layout, keep state and inject additional data into your page. The component…