Integrating WordPress CMS with NextJS React Front-end Websites

This blog is reader-supported. When you make a purchase through links on my site I may make a small commission at no additional cost to you.

As a proof of concept, I’ve created a NextJS website project and integrated the blog component with a headless WordPress backend (i.e. the WordPress install is hosted off-site at a secure location). It’s a simple website, but it shows the potential of decoupling content from code.

Headless static websites are the future.Google has been steadily ramping up to get everyone on board with measuring website “core vitals”. In not so many words, Google’s announced an algorithm update coming in May of 2021 that will impact websites and search rankings based on these new measurements. It has the potential to replicate the mobilgeddon SERPs crash when mobile-friendly responsive websites became a significant ranking factor, so it’s best to be prepared and stay ahead of the game.

When is the last time your website was updated?

Integrating WordPress with NextJS React front-end websites creates a quick and versatile headless CMS.

WordPress was built for regular people to feel comfortable being content creators. The WP dashboards’ GUI is second to none. It’s intuitive, simple to navigate, and infinitely customizable. WP has evolved into a powerful content management system (CMS) and can be used for creating all different types of websites – even websites that aren’t using a WordPress public-facing front-end.

In walks NextJS…

NextJS is a front-end framework for scaffolding ReactJS projects. It’s really great for creating a static website – like the type of website many local small businesses use. Built-in routing makes creating new pages a breeze and the dynamic routes features lets you get creative with how your populating content and what content you’re populating. For a front-end web developer, NextJS is fun to use (at least, for me it is). It’s simple to understand the syntax, how the pieces connect with each other, and robust enough to add all sorts of interactive features and enhancements (like dynamic content from an external RESTful API).

One caveat of a dynamic NextJs site is that it needs a Node server to run on a public web host. If the entire site was made up of static content (i.e. unchanged, hard-coded text) it could be built out and deployed to any regular webhostting – like the GoDaddy hosting I use to serve the website you’re on right now. However, once you add dynamic content the site requires a bit of server-side-power.

Vercel is a free-for-personal-projects ReactJS hosting solution. It integrates with GitHub repositories for easy version control and deploys automatically once new code is pushed to the remote repo. This project was my first time using Vercel (and NextJS) and I can tell you that it was extremely easy and streamlined to use for launching a public website. I would definitely recommend the service and will be using it again, myself.

Click here to see the project or check out the Git repo to see how I set it up.

(test it: visit the site, navigate to the blog page, and click through to an individual article)

Front-end javascript stacks have many benefits. I really enjoy the level of modularized scoping (i.e. only serving assets needed for the current page view) Asynchronous single-page website applications have been around for a few years now, but it’s still cool to see the page change and only have the necessary components refresh.

Share this post!

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments