In recent years, headless content management systems (CMS) have become increasingly popular among web developers. A headless CMS split the frontend and backend which allow developers to create customized blog theme using any new frontend Js libraries like React Js, and Next.js while using CMS for dynamic data.
Using this approach, we are going to focus on the Next Js which is one of the most famous server-side rendering frameworks of React Js. In this guide, we’ll cover how we can integrate Next Js as a frontend and WordPress as a headless CMS.
Why Use Next.js with WordPress as a Headless CMS?
There are several benefits to using Next.js with WordPress as a headless CMS:
Scalability: With WordPress and Next Js combination we can leverage all the WordPress dashboard features and connect it through Rest API or GraphQL with our independent blog theme on Next Js. It allows us to use a single WordPress dashboard serving multiple site blog pages separately built on any frontend like React, Next, Nuxt, Vue, etc.
Performance: Next.js provides automatic code splitting, which ensures that only the necessary code is loaded for a specific page, improving overall performance. Next js provide features like getStaticProps(), which allow us to fetch all the blog posts for the page while building it that makes a huge performance improvement cause it won’t make the API calls for page loading all the time.
SEO: WordPress has already become popular among people with its available WordPress plugins like Yoast etc. When we combine it with the Next Js getStaticProps which Pre Built the page with all required SEO data on the Page. It provides great help in SEO for any crawler for your page cause content is available statically for the page.
Flexibility: With WordPress as a headless CMS, we can independently design templates and develop it on our favorite JS library or framework. It reduces the plugin overload as well from WordPress which we usually install for any small UI components.
Development Ease: WordPress provides a rich set of Rest APIs and GraphQL plugins for accessing all required data which allows us to easily implement in any of the frontend themes.
Theme developer needs to follow the WordPress way of theme development, which provide such a relief for the developers like me.
Let’s start our step by step integration :
Prerequisite:
- PHP Env
- MySQL
- Node
- NPM
- Apache/Nginx
Step 1:
Installing WordPress: We can simply start by downloading & installing WordPress CMS from its website https://wordpress.org/download/. Once you get the zip file. Unzip it in your web root directory so that you can access WordPress http://localhost/your_wordpress_site
Step 2:
Create a custom theme named redirect-theme in the wp-content/themes and create a file index.php. Write the below mentioned code for redirection to your Next Js blog page.
<?php header(“location: http://your_next_js_blog_page_url”) ?>
It will disable the default WordPress frontend page so that we can consume only the APIs from WordPress.
Step 3:
Install Wp GraphQL Plugin in WordPress and create queries for all posts, post by id, post by author, etc.
Step 4:
Now we can test the GraphQL APIs from Postman and verify all required data in the response.
Step 5:
Now we can start consuming these APIs on the Next Js Pages using getStaticProps(). This method may require a building process when we are uploading any new blog post or page. Or we can use getServerSideProps() also.
Step 6:
Dynamic single blog post using the slug in the URL.
The above steps will give a high level idea and basic implementation knowledge on how we can make our first blog page using the Nexj.js and headless WordPress CMS.