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
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.
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 ourindex.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!
Alright! Thanks for Reading!
Stay tuned! More articles are coming out! Feel free to follow, comment, and share the articles to support me π€
Useful Resources for the Journey
To go further in your journey, here are the resources you need:
As a Developer
β‘ Did you know you can run a Business with Headless CMS?
β‘ Getting started with GraphCMS
β‘ Building a super-fast and secure website with a CMS is no big deal.
β‘ Youtube Videos on Headless CMS
β‘ Get Started with Gatsby JS and Headless CMS
As Business Owner or Company
β‘ How To Model And Structure Content For A Headless CMS
β‘ Should you use WordPress or Headless CMS
Here is my Business Website:
π WebContract Business for Headless CMS
π Let's connect
Want to start blogging? π₯Join NOW!
Top comments (0)