By What is a headless CMS?
The backend (where you manage your content) and frontend (where the content is presented to website visitors) are combined into a single monolithic system in a WordPress CMS. Both the content and the display of the content are separated when WordPress is used as a headless CMS.
The content presentation layer becomes more adaptable as a result of this. To showcase the raw WordPress-driven content, you may now create a website or a mobile application. The backend and frontend are no longer linked to the CMS.
WordPress as a headless CMS
It allows headless WordPress development to modify the content distribution channels at any time without having to re-author the content. Because the content is given as raw data via an API, you may present it using any technology you like.
As a developer, this frees you up to focus on the things that really matter, like building amazing digital experiences for your consumers. Omni-channel designs are aided by API-driven data. You generate WordPress content and distribute it via API. As a result, the content shines through on all platforms.
Adding a post
headless WordPress development Company will apply this situation by first adding and uploading a post in WordPress admin because WordPress and Next.js are both used to create blog-based websites. Then go to posts in your WordPress admin panel and create a category.
Enter a name, slug, and description for the post category in the left pane of the resultant page, then click the button Add new category. Create a new post now. Navigate to the left sidebar of the admin dashboard and choose posts.
On the right-hand pop-up that appears, select Add new. A WordPress blog’s published posts can be assigned to one of several categories. Click the Post tab on the right side.
Installing the WpGraphQL plugin
WPGraphQL is a free, open-source WordPress plugin that offers any WordPress site with an expandable GraphQL schema and API. It will be used to retrieve GraphQL schema in order to assist the WordPress API in communicating with Next.js. Let’s get this plugin installed now. Navigate to plugins from the dashboard’s left sidebar. Click Add new in the resulting pop-up on the right.
Running a query from the GraphiQL IDE
You will see a GraphQL tab at the bottom of the left sidebar after installing the plugin on your WordPress site. Navigate to it, and then click GraphiQL IDE on the subsequent pop-up, which will take you to a GraphQL playground where you can build your queries.
We are obtaining all of the articles from the above question, with each query receiving the post title, category, excerpt, and content. Paste the above query into the left pane. Then, by pressing the play button, run the query.
Setting up the Next.js environment
Follow these steps to set up the Next.js environment:
Run the following command to make a simple Next.js app using create-next-app:
-npx create-next-app cms-wordpress-app
A folder called cms-wordpress-app will be created, including all of the files needed to begin working on a Next.js project. To go into the project folder cms-wordpress-app, use the Change Directory (cd) command.
-cd cms-wordpress-app
Start the Next.js development server with the following command to see if everything is working properly:
-npm run dev
The command above starts the development server on port 3000 and makes it accessible to your local host. Go to http://localhost:3000 in your browser. Your browser will be provided a Next.js boilerplate blog.
Connecting to the WordPress CMS
Create a folder named lib to connect to the WordPress CMS. We will handle the connection between our app and the WordPress CMS in this area. We will build the different functions for talking with the WordPress API in the api.js file in the pages folder.
Fetch all WordPress posts
Add a fetch function to fetch all the posts as follows:
export async function get posts(){
const data = await fetchAPI
Send a request to the WordPress API to get the first twenty posts.
Testing
To test, use the following command to make sure the development server is up and running:
npm run dev
Go to http://localhost:3000 in your browser. Based on the posts you have uploaded to your WordPress blog, your post will be displayed.
Author Bio:- Mr Gerry is technical blogger like to write about various technology used in web development and mobile app development he own a technical blog for guest post.
