There are hundreds of tools you can use as a backend for Next.js. One of them is WordPress. My fondness for WordPress started back in 2009, and maybe that’s why it has always been my go-to CMS. Recently, I created a simple directory using WordPress as the backend and Next.js as the frontend. I needed something crazy fast, so I figured I’d give Next.js a try.
I’ve been hearing a lot about Next.js lately, so I thought, why not? To my expectations, it worked out pretty great. Here’s a rough overview of the setup I used.
Backend Setup
As you already know, I used WordPress for the backend. To dive into more detail, I used the CPT UI plugin to create a custom post type. For those unfamiliar with WordPress, you can easily create a custom post type without writing any code. A custom post type serves as an entity in the database. For example, in a directory of cars, each car can be a custom post type.
Once my post type was set, I used another plugin called ACF (Advanced Custom Fields). By default, WordPress provides only a few options for an individual post, but you can extend those using ACF. I created the necessary fields I needed for my posts.
Additionally, I used the Yoast SEO plugin for SEO. Even though WordPress is only being used as the backend, I still took advantage of the SEO plugin to help with titles and meta descriptions for each post.
That’s all I needed! WordPress has a default REST API that lets you pull all the information you need on the frontend—no need to write custom APIs.
Frontend Setup
For the frontend, I designed the site using Tailwind CSS, and that was pretty much it. I chose Vercel to host the site online.
Now, here’s the crazy part: I knew Next.js was fast, but it completely blew me away when I ran my site through Google Core Web Vitals.
Final Thoughts
Using WordPress as a backend with Next.js as a frontend turned out to be an excellent combination. The flexibility of WordPress, combined with the speed and performance of Next.js, made the whole experience worth it.