How to make a blog with next js and WordPress as headless cms with graphql

In this article, we will see how to make a blog with next js and WordPress for cms with graphql.

Requirement

Three things will be required frontend Next js and hosted WordPress with wp-graphql plugin

• Next js
• wp-graphql plugin
• wordpress

Routes for blog and posts

Make routes for the blog homepage and post page.

Keep your api request functions in lib folder

---pages
   ---blog
   ---index.js
   ---[slug].js
---lib
   ---post.js

blog index.js page

import React from "react";
import styles from "@/styles/blog.module.css";

import Sidebar from "@/components/sidebar";
import Post from "@/components/post";
import { getCategorySlugs, getPostList } from "lib/posts";
const Blog = ({ posts, categories }) => {
  console.log(categories);
  return (
    <div className={`${styles.blog} container my-4`}>
      <div className="row">
        <div className="col-md-8">
          <div className={styles.items}>
            {posts?.length > 0 &&
              posts?.map((post) => {
                return <Post key={post.slug} post={post} styles={styles} />;
              })}
          </div>
        </div>
        <div className="col-md-4">
          <Sidebar categories={categories} styles={styles} />
        </div>
      </div>
    </div>
  );
};
export default Blog;
export async function getStaticProps() {
  const data = await getPostList();
  const categories = await getCategorySlugs();

  return {
    props: {
      posts: data.nodes,
      categories,
    },
  };
}

[slug.js] for post

import Image from "next/image";
import Toc from "@/components/tableofcontent";
import styles from "../../styles/blog.module.css";


import { getCategorySlugs, getPostList, getSinglePost } from "lib/posts";
import { useEffect } from "react";
const Blog = ({ post, categories }) => {

  return (
    <>
      {post && (
        <main className={`${styles.blog} mainscrollbar mb-4`}>
          <h1 className="p-2">{post?.title}</h1>
          <div className="container">
            <div className="row">
              <div className="col-md-12">
                <div
                  className={`my-4 article ${styles.article}`}
                  dangerouslySetInnerHTML={{ __html: post.content }}
                />
              </div>
            </div>
          </div>
        </main>
      )}
    </>
  );
};
export default Blog;

export async function getStaticPaths() {
  const { nodes: posts } = await getPostList();
  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }));
  return {
    paths,
    fallback: true,
  };
}
export async function getStaticProps(req) {
  const post = await getSinglePost(req.params.slug);
  if (!post)
    return {
      notFound: true,
    };
  return {
    props: {
      post,
    },
    revalidate: 10,
  };
}

how to query posts from WordPress by graphql

we can use WordPress rest API to query posts from WordPress by graphql

Query for posts

  query: `query getMorePosts {
        posts {
          nodes {
            date
            excerpt(format: RENDERED)
            slug
            title
            featuredImage {
              node {
                mediaDetails {
                  file
                  sizes {
                    file
                    sourceUrl
                    width
                    height
                  }
                }
              }
            }
            categories {
              nodes {
                name
                slug
              }
            }
          }
          pageInfo {
            endCursor
            hasNextPage
            hasPreviousPage
            startCursor
          }
        }
      }`,

Query for single post

    query: `query getSinglePost {
      postBy(slug: "${slug}") {
        content
        date
        excerpt
        featuredImage {
          node {
            mediaDetails {
              sizes {
                file
                sourceUrl
                height
                width
              }
            }
          }
        }
        modified
        slug
        title
      }

    }`,

Query for categorylist

     `query getAllCategorySlug {
                categories {
                  nodes{
                    slug
                  }
                }
            }`