Geek Culture
Published in

Geek Culture

Using WordPress as a Headless CMS with React/Next.js

This article was first published on the Aeeiee Blog.

WordPress as a Headless CMS with React

React, the frontend framework created at Facebook in 2013, with over 165k GitHub stars is now one of the most loved Frontend frameworks used by JavaScript developers. React is a powerful framework that allows developers to create re-usable code blocks called components, use the Virtual DOM to update DOM elements — making web apps more performant and has a huge collection of libraries to make the lives of developers easier.

WordPress on the other hand was created 10years before the first version of React was released and this powerful, feature-rich framework is still alive and well today. WordPress still continues to power over 40% of the web and it won’t be going anywhere soon.

In this article, we’ll combine the power of both frameworks to create an application using React on the FrontEnd with WordPress as the backend — or more correctly — as the Content Management System (CMS) that powers our App.


To follow this tutorial, you’ll need basic knowledge of

  • JavaScript, specifically JSX
  • Command Line
  • Local by Flywheel
  • NPM
  • Node
  • Postman (optional)

Setup the backend

First, we’ll setup the backend with WordPress. For this example, we’ll be setting up the backend using Local by Flywheel. If you need help setting up Local on your machine, you can refer to this blog post.

With your WordPress backend setup with Local, Add a few posts to your WordPress backend before continuing with this guide.

Using Postman, make a request to http://YOUR_SITE_NAME.local/wp-json/wp/v2/posts. You should get a response like below back.

Once you confirm that the POSTS endpoint is working, we’re good to go!

You can add additional POSTS, create custom post types etc on the backend using the WordPress GUI.

Setting up the FrontEnd

We’ll be building the FrontEnd of this application using Next.JS and TailwindCSS (my all-time favourite CSS framework). Next JS comes with image optimization, routing, serverless functions and more out of the box. It’s no surprise the project has over 64k GitHub stars. TailwindCSS is a utility first framework that provides low level classes for you to write CSS within your HTML.

Thankfully, we do not need to start from scratch. NextJS has a simple CLI shortcut that will generate a NextJS + TailwindCSS boilerplate for us.

To run the command below, make sure you’ve Node and NPM set up on your machine.

yarn create next-app --example with-tailwindcss wordpress-react-app && cd wordpress-react-app

The wordpress-react-app line at the end of the command above generates the example files inside a folder called wordpress-react-app.

Once the installation is done, head into the root directory of the project. Create a folder called lib > constants.js. In your constants.js file, add the following piece of code. Replace our URL with the URL of your site.

export const POSTS_API_URL = "http://YOUR_SITE_NAME.local/wp-json/wp/v2/posts"export const AUTHORS_API_URL = "http://YOUR_SITE_NAME.local/wp-json/wp/v2/users"export const MEDIA_API_URL = "http://YOUR_SITE_NAME.local/wp-json/wp/v2/media"

Getting and Displaying Posts on the FrontEnd

To make requests to our backend WordPress server, we can use the JavaScript Fetch API or Axios. Personally, I prefer using axios as I think the syntax is much cleaner.

We also need a HTML Parser to help Parse the HTML tags returned from the WordPress server.

Let’s install both packages.

yarn add axios html-react-parser

To make our code a little cleaner, we’ll also create some helper methods that handle requests to our server. In your lib folder, create an utils.js file. In this file, we’ll create methods that handle getting the post, author and featured image from our server.

WordPress by default exposes a /post/[id] endpoint that gives us information about a post. This endpoint will only give us the authorId and featuredImageId for a post and we would need to make additional requests to the /author/[id] and /media/[id] endpoints to get additional data about a post’s author and featured image.

Add the following block of code.

With that done, head into pages > index.js. Here, we’ll make a request to get all the posts from our WordPress server and store them in a React state.

As you can see, we are rendering a <Post /> component that takes in the post prop returned by our getAllPostsFromServer function.

Let’s create the Post component.

Create a new folder called components. Within that component create a file called Post.js. Our Post component will take in a post object containing the id’s for the media and the author and then make subsequent requests to fetch the name and url respectively.

Notice that we’re building links to each post in our Post component template i.e /post/${}. Later on we’ll create a page that extracts the id’s from the URL in order to pull a specific post from our WordPress server.

You should now be able to see all posts on your landing page.

Displaying Individual Posts

Next, let’s display individual posts. NextJS has inbuilt routing that allows us dynamically render pages and content. You can read more about Dynamic Routes in Nextjs. We’ll use the getStaticProps and getStaticPaths methods to pre-render our pages at build time. Read more here. Pre-rendering pages at build times means that when Nextjs builds and deploys our site, the pages for each post are instantly created at the same time. This ensures that our site loads fast on each route change as it doesn’t need to make additional trips to pull data from our WordPress server when a User tries navigating to a specific post.

Let’s get into it!

In your pages folder, create a folder called post and within that create a file named [id].js. This automatically generates a dynamic route — /post/[postId].js. We’ll then extract the id from the URL and use that to load the post with that id.

We need two use two additional methods exposed by Nextjs — getStaticPaths and getStaticProps. The getStaticPaths method will fetch all the postId’s at the point where our site is being built and compiled. Based on the id’s returned from this method, Nextjs will automatically begin the process of pre-rendering pages ensuring that our site remains fast!

Next, we call the getStaticProps method. This method will get all the extra parameters needed for a post using the postId passed down from the getStaticPaths method. getStaticProps will then pass these parameters to our frontend as props.

With all of the server-side work done, we can now complete writing the code for rendering a specific post like we started above.

With that done, we can now test that everything works!

You can see the full code here




A new tech publication by Start it up (

Recommended from Medium

(Angular) Globally enforce a coding style using TSLint + Prettier + Husky

Angular Dynamic Form — The complete guide to building an advanced dynamic form 💪

Create Meeting URLs for an Agora Video Call with the Web UIKit

How to make your websites load in less than a second with react

In Case You’ve Heard That COVID-19 Is “Really Not That Bad”…

Internationalization of Spring Boot RESTful Services

How to improve the mobile responsiveness of your website

Nametag: Genesis Collection One-Time Name Change Details

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Adebola Adeniran

Adebola Adeniran

Growth at Moni(YC W22) |

More from Medium

How to Add Google Fonts to Your Next.js Website

Complete email/password authentication with firebase-9 and nextjs.

Drupal vs. WordPress: Comparing Enterprise CMS Platforms

Best open-source headless CMS Platforms