WordPress headless Project and how to deal with
Hey everyone! Our team and I (acting as a junior backend) recently finished rebuilding GlobeVM (an enterprise Cloud, IT, and Cybersecurity provider) from a traditional monolithic WordPress site into a Headless architecture. I wanted to share our entire journey, our tech stack, the massive headaches we faced, and the solutions we engineered. If you are planning a Headless WP build soon, grab a this might save you weeks of debugging! The Tech Stack Frontend: Next.js (App Router), React, deployed on Vercel. Backend: WordPress hosted on Cloudways (Purely as a headless CMS). Data Structure: Advanced Custom Fields (ACF Pro) + Custom Post Type UI (CPT UI). SEO: Yoast SEO Premium (via REST API). Caching: Vercel Edge Cache (ISR) + Redis Object Cache on Cloudways. During the development and deployment of this website we faced several issues containing the frontend stack itself and traditional features of WordPress. I tried my best to save them all and show them all up here for everyone so that we can discuss on every section of it, maybe we could reach to even something more special :) Challenge 1: The API Was a Mess ("BFF" Architecture) When we first started, we were using the default WordPress REST API. Our Next.js frontend was making 8 different fetch() calls just to build the Blog Homepage (fetching posts, authors, categories, tags, ACF fields, etc.). We were also using messy URLs like ?_fields=id,title,acf&_embed. The Solution: We built a Backend-For-Frontend (BFF). Instead of Next.js doing the heavy lifting, we wrote a custom PHP plugin in WordPress. We created a single master endpoint (/wp-json/gvm/v1/blog-home). WordPress ran all the complex database queries, bundled the Tags, Hero Article, and Categories into one beautiful JSON array, and cached it in RAM using Transients & Redis. Only one of WordPress default api was used for our categories. Result: Next.js made one fetch call. The page loads instantly.' Challenge 2: Handling Vector Icons & ACF Our design heavily re