WordPress with Next.js, Typescript, React, TailwindCSS

Check out my Next.js, Typescript, React, TailwindCSS project

Click here: 

https://francisco-guardado-universe-wp-fron.vercel.app

Github repo:
https://github.com/franciscojavierguardado101/francisco-guardado-universe-wp-frontend

 

Project: Universe WP — Headless WordPress + Next.js Portfolio Site                        
                                                                                            
  What it is                                                                                
                                                                                            
  A headless CMS architecture where WordPress acts purely as a content management backend,  
  and a custom Next.js application serves as the public-facing frontend. The two systems    
  communicate over HTTP — the frontend fetches content from WordPress via the REST API and  
  GraphQL, then renders it as a fast, modern React application.
 

---
  Architecture Overview

  WordPress (CMS/API)  →  REST API + GraphQL  →  Next.js (Frontend)
       Pantheon                                          Vercel         


Backend — WordPress (PHP)                                                                 
                                                                                            
  WordPress 6.x: Content management system and data source                                
  PHP 8.3: WordPress runtime                                                                
  MariaDB 10.11: Relational database
  Nginx-FPM: Web server (via DDEV locally)                                                  
  WPGraphQL: Exposes WordPress content via a GraphQL API
  Advanced Custom Fields (ACF) + WPGraphQL for ACF: Custom field groups surfaced through    
  GraphQL
  Custom Post Type UI: Registers custom post types (Spotlights, Portfolio, Resources, etc.) 
  DDEV: Docker-based local dev environment (mirrors the Pantheon production config)
  Pantheon: Production hosting for WordPress

Frontend — Next.js                                                                        
                  
  Next.js 16 (App Router): React framework with server components and file-based routing  
  React 19: UI library
  TypeScript: Static typing throughout
  Tailwind CSS v4: Utility-first styling
  graphql-request: Lightweight GraphQL client for querying WPGraphQL
  WordPress REST API: Direct fetch for posts, categories, custom post types
  React Icons / Chakra UI Icons: Icon library                                               
  Vercel: Production hosting with automatic CI/CD

I built a fully decoupled headless WordPress site where I authored two custom WordPress
plugins with a Gutenberg block library and a headless REST API layer and a Next.js 16   
frontend with TypeScript, Tailwind, and both GraphQL and REST data fetching, deployed on
Vercel with WordPress hosted on Pantheon.