CodeWithKenn

Posted on Feb 4, 2022

Getting Started with Nextjs and GraphCMS

#jamstack #nextjs #react #graphql

Hey, there!
This is Kenn, Your Daily Advocate, Business Partner, and Friend from CodeWithKenn!
Welcome to the Blog! Make yourself at home!

Are you looking for a way to build a website with a faster and easier process? this is for you!
Here I am to help you get started with Headless CMS and React Technologies (Ecosystem).

In a nutshell, today we're going to see how to connect Nextjs as Frontend to GraphCMS as Headless CMS.

The Tech Stack

We're going to use:

*Nextjs: **It lets you build server-side rendering and static web applications using React. It's a great tool to build your next website. It has many great features and advantages, which can make Nextjs your first option for building your next web application. *(FreeCodeCamp)

We're going to use it as Frontend.

*GraphCMS: **GraphCMS is the Headless CMS allowing you to build digital experiences the way you envisioned them - with all your backends, frontends, and services, working together in harmony. *(GraphCMS)

GraphCMS is going to be used as our Backend.

*GraphQL: **GraphQL is a query language and server-side runtime for application programming interfaces (APIs) that prioritizes giving clients exactly the data they request and no more. *(RedHat)

The Communication between Nextjs and GraphCMS is going to be made possible by GraphQL. We'll fetch data using it.

**Tailwind CSS: **Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces.

Hey! In my Blog, I don't complicate stuff. I write simple, useful, and short articles. So 😎 follow me!

Let's start Building

GraphCMS as Headless CMS

Create a Free Account and Setup the Project

Go to the Signup Page 👉 Create An Account
Start a New Blank Project

Enter the Project Name, Description and Select the CDN Node for your Project.

Choose the Free Plan

Skip this part, You will invite later

Note: This Section can help you invite your client (if you're doing some Freelance work with somebody).

Here You Go!

Creating Content Model (Schema Section)

Give the Content Model Name.
Don't worry, we're gonna explain what a Content model is in a couple of seconds.

On our Website, we're gonna Write a Greeting text from GraphCMS and fetch it to the Frontend using GraphQL.

⛳*** A content model documents all the different kinds of content you have on your website. It breaks content types down into their component parts, describes them in detail, and maps out how they relate to one another.***

Content Model Details Structure

In this step, you only have to choose what you really want to use. You can find many data fields you can explore, such as Single Text, Multi-Line Text, Markdown, Slug, Image, Rich-Text, Date, Localization.

Note: Most of the Headless CMSs have the same data types in their platforms. So, One you mastered this, You can use whatever Headless CMS you want.

You will find a list of them.

We're gonna use the Single-line text and Multi-line text fields.

Choosing Fields and Entering Fields Title

Let's Enter our Welcome Text (Content Section)
Go to the Next Section (Content) and Choose the Schema (GrettingMessage for our Project)

Create the Content

Note: This can be created as many as we want. For Example, we can create many employees' names to show on the Website.

Nextjs as our Frontend Framework

We'll be using a Nextjs + Tailwind CSS Starter and Install GraphQL:

Install The Project

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Install graphql-request

yarn add graphql-request

Install GraphQL

yarn add graphql

What we have got:

We can also add some customer font using Tailwind CSS:

Let's clean the Index Component Page:

import Head from 'next/head'

export default function Home() {


  return (
    <div className="flex min-h-screen flex-col items-center justify-center py-2">
      <Head>
        <title>Next - Headless CMS</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className="flex w-full flex-1 flex-col items-center justify-center px-20 text-center">
        <h1 className="text-6xl font-bold">
          Welcome to{' '}
          <a className="text-blue-600" href="https://graphcms.com">
            GraphCMS
          </a>
        </h1>



        <div className="mt-6 flex max-w-4xl flex-wrap items-center justify-around sm:w-full"></div>
      </main>

      <footer className="flex h-24 w-full items-center justify-center border-t">
        <a
          className="flex items-center justify-center"
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <img src="/vercel.svg" alt="Vercel Logo" className="ml-2 h-4" />
        </a>
      </footer>
    </div>
  )
}

Let's Connect Nextjs to GraphCMS:

Go back to the CMS in the Project Settings Page, then to the Public Content API, and Copy the Content API Key.

After that, Let's Go back in Nextjs and Create a .env.local and paste the API key as below:

Let's Import graphql-request into our index.js project:

import { GraphQLClient } from 'graphql-request'

// And let's initialize our GraphQL Client project

const graphcms = new GraphQLClient(process.env.GRAPHQL_URL_ENDPOINT)


export default function Home() {

  return (
    ...
  )
}

Done 🎉
We're connected!

Let's run the app:

npm run dev

Here is the output:

Note: This doesn't come from the CMS, remember we made it from the index.js file. 🤔

Now, Let's create our query from GraphCMS

This is our query:

query {
  greetingMessages {
    greatTitle
    productDescription
  }
}

Let's add it into Nextjs ìndex.js file using the getStaticProps function:

// Query Data
export async function getStaticProps() {
  try {
    const query = `
      query {
        greetingMessages {
          greatTitle
          productDescription
        }
      }
    `

    const { greetingMessages } = await graphcms.request(query)

    return {
      props: {
        greetingMessages,
      },
    }
  } catch (error) {
    console.log(error)
  }

  return {
    props: {},
  }
}

Note: We have used the try...catch method for simple error handling, but it's not a big deal 👋

Last Step: Import The GreetingMessages as a Prop into the main Component:

export default function Home({ greetingMessages }) {

  return (
    ...
  )
}

Let's now see if it really works 😃 after refreshing the server:

Yes, it does work! 🔥

Let's render the data and view it on the front page 😃

export default function Home({ greetingMessages }) {

  return (
   <div>
        ...
     <div className="mx-auto flex flex-col">
          {greetingMessages?.map((content, index) => (
            <div key={index} className="my-10">
              <h1 className="text-xl font-bold"> {content.greatTitle} </h1>
              <p className="text-md my-5 text-justify font-medium">
                {' '}
                {content.productDescription}{' '}
              </p>
            </div>
          ))}
        </div>
        ...
</div>
  )
}

Here We Goooo!