Next.js: fetching data from GraphCMS

Previously, I made a brief introduction about how I started to build my web page using Next.js. I have already explained how to integrate Material-UI into the project and today is the turn of the integration of CMS service where fetch the dynamic data from, GraphCMS in this case.

Some sections contain dynamic content such as the books I have already read, the skills, and the blog entries that are still under construction. The management of this kind of content is easier throughout a CMS compared with static content.

Next.js offers several providers with very complete documentation explaining how to integrate each one. However, after an exhaustive benchmarking, GraphCMS was chosen.

What was I looking for in a CMS provider?

The first step was defining the “must-have” list of the CMS provider that fit with my needs. I only need an API from where the frontend application fetches the dynamic content and I wanted to spend a little time configuring and hooking this API into the Next.js application. Therefore, this CMS provider should fulfil most of the following requirements:

• The price: I did want to pay for any subscription before being sure that I felt comfortable using the CMS. For this reason, I need a CMS that gave the option to start from a cheap plan at first instance. GraphCMS offers a free plan where you can experiment.
• Excellent UX: GraphCMS highlights every concept since the first time you sign into. Helping you to understand those that you are doing.
• High-quality documentation: the platform is plenty of links to documentation, examples and community. And there is a kind of chatbox where you can ask any doubt to the GraphCMS staff. But not only the conceptual documentation of how the CMS works is well written; the technical documentation is also very important for me.
• Easy querying through the API: GraphQL simplifies the most complex query with its human-readable syntax.
• Easy integration with your Next.js project: Next.js has an example in github that is quite easy-going. I did not face any issue adapting the example to my project.
• Get the images in different sizes: This unexpected feature was like a bonus track that I was not expecting. The better of this feature is you can define the size of the image in the request.

coverImage {
  url(transformation: {
   image: {
     resize: {
       fit:clip,
       height:400
     }
   }
 })
}

Implementation

• Create an account in GraphCMS: Creating the account is quite easy. You only need to sign up to the platform with either a Google or Facebook account.
• Create a project: The next step is to create a project. You have several templates available to not start it from scratch.

Create a project is easy!

• Get the token to be able to use the API: Go to “Settings → API access” and get the development and production token. You must define the tokens as environment variables in your local and production.

• Create new content: Create the post you want to publish on your web page. In my case, any content has a tag that specifies the sort of content that belongs to. For example, all the posts of books have the label read-books. In this way, I will filter them by queries in the corresponding request.

• Integrate the API into the project: Following the step-by-step instructions, you are sure to integrate the API into your project without problem. In my case, I have created a service layer as best practice to decouple the definition from the implementation.
• Better performance: According to the Next.js documentation, it is better to load content in compilation time instead of performing the request in any paging load. It depends on how recurrent you introduce new content to the CMS. I implement CICD through Vercel that trigger a new compilation any time I commit a change into the project.

In summary

GraphCMS is very easy to configure into a NextJS project and thanks to GraphQL you will be able to simplify the most complex query and get just what you want instead of loading unnecessary data in any query.

Cheers and Happy coding!!.