Build a Blog Website with ReactJs-PrimeReact and Hygraph Headless CMS

Today, the world of technology is constantly advancing and websites have become an essential part of digital assets. In this fast-changing environment, content management systems (CMS) are of great importance for building websites and managing content. While traditional CMSs offer user-friendly interfaces and ease of management, a headless CMS's a more flexible and lightweight alternative for modern web applications, has recently attracted attention. In this article, we will discuss how Hygraph CMS can be used in websites and integrated with other technologies, including
✅Next.js
✅PrimeReact
✅PrimeDesigner

Special thanks to my friend, collegue and collabrator of this project and content @gucal ✨

About the Website

CosmedicIstanbul, the most important features of this blog website offering medical aesthetic services are the following:

1️⃣ - User Friendly Administration: The website administrator or service provider can add or remove their own pages and change their content easily. Thanks to this feature, content updates can be made quickly and without any difficulties.

2️⃣ - Original Design: A remarkable feature of Cosmedic Istanbul is that it uses its own original design without being dependent on paid templates. In this way, the look of the website is completely unique to the company and the styling process is greatly simplified with the contributions of open source projects such as PrimeReact and PrimeReact Designer. Thus, a professional look is achieved without having to write pages of CSS code.

3️⃣ - Completely Free to Build: All elements and third party projects used in the site are completely free of charge and do not cost anything for the developers.

Thanks to PrimeReact and PrimeReact Designer offered by open source projects, CosmedicIstanbul has managed to have a unique website that reflects its own style while making the work easier in design and content management.

What is Hygraph Headless CMS?

Hygraph headless CMS is a content management system that separates the presentation layer (where content is delivered) from the backend (where content is managed). It uses GraphQL content APIs on the fly to distribute content. Hygraph headless CMS allows you to manage content in one place and distribute that content to any digital channel you choose.

Genarating Slugs with one Schema

Once you have created your schema you can add rich texts, assests etc. The important thing is how you can call them in your Next.js code. Image below you can see part of the creation of your schema

Using Slug on the Frontend

An example REST API request:

 const { slug } = params
  const graphQLClient = new GraphQLClient(
    'https://api-eu-central-1-shared-euc1-02.hygraph.com/v2/<Your Token>/master'
  )

An example GraphQL Query:

const response = await graphQLClient.request(
    `query Blog {
      blog(where:{slug: "${slug}"}){
        id
        title
        img {
          width
          height
          url
        }
        voices {
          url
        }
        seo {
          ... on Seo {
            metaDescription
            metaTitle
          }
     }
    }    `

Why I used PrimeReact for UI library?

PrimeReact is an excellent choice for several reasons. Firstly, it offers an extensive component library with over 90 pre-designed components, allowing for quick and easy development. These components include various interface elements, form elements, and graphics.

Additionally, PrimeReact provides developer-friendly editing facilities with a simple and consistent API design, making it easy to switch between components and edit them. This can significantly improve the efficiency of development teams and positively impact project timelines. PrimeReact also offers pass-through features, allowing for the addition of extra functionality to its components without altering their core features.
Lastly, PrimeReact will soon provide unstyled mode support, giving users greater control over the style and will allows you to use favorite CSS library like Tailwind, Bootstrap and more. Overall, PrimeReact offers a comprehensive and flexible solution for web development needs.