Headless WooCommerce Product Browser
01 The Challenge
Modern e-commerce projects increasingly require decoupled architectures where the frontend is built with React/Next.js while WordPress/WooCommerce handles the backend. The native WooCommerce REST API uses consumer key/secret authentication designed for server-to-server integrations, not for safe use in a public-facing browser client, and CORS handling for cross-origin requests is not built in by default. A production-ready solution demonstrating secure, browser-safe authentication, efficient product browsing, and user-specific features like wishlists was needed for headless WooCommerce use cases.
02 The Solution
Built a custom WordPress plugin providing JWT authentication with 1-hour access tokens and 7-day refresh tokens, covering login, refresh, logout, and user info endpoints. Developed a Next.js 14 frontend using the App Router, with Incremental Static Regeneration (ISR) for product pages, TypeScript for type safety, and Tailwind CSS for responsive design. Implemented CORS handling for cross-origin browser requests and deployed to Vercel with automatic deployments from GitHub. Backend WordPress API repository available at https://github.com/dilipraghavan/wc-headless-api
03 Impact & Results
Product pages use Incremental Static Regeneration with a 60-second revalidation window — content is served from cache for fast page loads and strong SEO, with automatic background regeneration after the revalidation period, avoiding a fresh database query on every request. Product images are served through Next.js's built-in Image component for automatic format optimization and responsive sizing.
// project links
GitHub Repo→// video demo
// gallery
Login Page.
Wishlist Page.
Product Details.
Product Grid.