How to Deploy WordPress on Vercel in 2026 - Complete Guide

Combining WordPress content management with Vercel's blazing-fast edge network · Photo: Pexels

A headless WordPress + Vercel stack gives you the best of both worlds: the familiar WordPress editor for your content team, and the performance of a modern CDN-deployed site that loads in under 1 second globally.

Can You Deploy WordPress Directly on Vercel?

Short answer: No, not directly.

Vercel is a frontend cloud platform optimised for JavaScript frameworks like Next.js, Nuxt, SvelteKit, and Astro. WordPress is a PHP application. Vercel does not support PHP hosting.

The correct approach is the headless architecture - described below.

What Is Headless WordPress?

Think of traditional WordPress like a restaurant where the kitchen (backend) and the dining room (frontend) are in the same building.

Headless WordPress separates them. The kitchen (WordPress PHP backend) stays in one place and manages the food (content). The dining room (your Next.js frontend) is built somewhere else entirely - in this case, deployed on Vercel - and receives the food through a delivery hatch (the WordPress REST API or WPGraphQL).

The result: your editors still use the familiar WordPress admin panel to write posts. But your visitors experience a blazing-fast modern website with 95+ PageSpeed scores.

The Architecture Explained

WordPress Backend (PHP)          Next.js Frontend (Vercel)
├── wp-admin (editors write here) ←→ /api/posts → fetch posts
├── MySQL database                    ├── /blog → ISR pages
├── WPGraphQL plugin                  ├── /[slug] → dynamic routes
└── Hosted on: VPS, Kinsta, etc.  └── Deployed on: Vercel (free)
  

The flow when a visitor loads your blog:

1. Visitor requests yourdomain.com/blog/my-post
2. Vercel serves the pre-built static HTML from its CDN (instant)
3. When you publish a new post in WordPress, it sends a webhook to Vercel
4. Vercel rebuilds just that page (Incremental Static Regeneration)

What You Need Before Starting

• A WordPress installation - hosted on any server (not Vercel). Options: Cloudways, Kinsta, SiteGround, or a self-hosted VPS. Even a free Fly.io instance works.
• WPGraphQL plugin installed on your WordPress site (free)
• Node.js 18+ installed on your local machine
• A Vercel account - free at vercel.com
• A GitHub account - to connect your code repo to Vercel

Step-by-Step Deployment Guide

1. Install WPGraphQL on Your WordPress Site

   In your WordPress admin panel, go to Plugins → Add New → search "WPGraphQL" → install and activate. This turns your WordPress site into a GraphQL API that Next.js can query. Test it by visiting: https://yourwordpress.com/graphql

2. Clone the Official WordPress + Next.js Starter

   Vercel provides an official starter template. Run this in your terminal: npx create-next-app --example cms-wordpress my-wp-site then cd my-wp-site

3. Configure Your Environment Variables

   Copy the example file: cp .env.local.example .env.local - then open it and add your WordPress URL: WORDPRESS_API_URL=https://yourwordpress.com/graphql

4. Run Locally to Test

   Run npm install then npm run dev and open http://localhost:3000. You should see your WordPress posts rendered in the Next.js frontend. If you can see your blog posts, the connection is working.

5. Push to GitHub

   Initialise a git repo, commit your code, and push to GitHub. Vercel needs your code on GitHub to trigger automatic deployments on every push.

6. Deploy to Vercel

   Go to vercel.com/new, import your GitHub repository, add your WORDPRESS_API_URL environment variable, and click Deploy. Vercel auto-detects Next.js - no configuration needed. Your site goes live in under 2 minutes.

The headless WordPress + Next.js + Vercel stack is the modern standard for fast, scalable sites · Photo: Pexels

Environment Variables in Vercel Dashboard

After deploying, add any additional environment variables in Vercel:

1. Go to your project in Vercel Dashboard
2. Click "Settings" → "Environment Variables"
3. Add WORDPRESS_API_URL for Production, Preview, and Development
4. Redeploy for changes to take effect

Setting Up On-Demand Revalidation (Auto-Update When You Publish)

By default, Next.js will regenerate pages on a schedule (ISR). For instant updates when you publish a new WordPress post, set up a webhook:

1. Create a WORDPRESS_PREVIEW_SECRET in your .env.local (any random string)
2. In WordPress admin: Settings → WPGraphQL → Webhooks → add your Vercel revalidation URL
3. Vercel URL format: https://yoursite.vercel.app/api/revalidate?secret=YOUR_SECRET

Now every time you publish a post in WordPress, Vercel instantly rebuilds that page.

Alternative: Serverless WordPress with Vercel Functions (Experimental)

For advanced users, there's an experimental setup where WordPress PHP runs as a serverless function. The Serverless WordPress project packages WordPress into a Lambda-compatible format. This is not production-ready for most use cases, but it's an interesting option for simple blogs.

WordPress Hosting Options Compared

This site itself is built with Next.js deployed on Vercel - the same stack. Read our guide on MCP and AI agents for more on how we automate content workflows. See our Complete SEO Guide 2026 to make sure your new fast site actually ranks. And for managing your content workflows with AI, our Claude Console guide shows you how to automate WordPress content generation at scale.

The WordPress Vercel deployment workflow described in this guide is the most reliable way to get the speed benefits of Vercel with the content management power of WordPress. Whether you are doing a full headless WordPress Vercel setup for the first time or migrating an existing site, the WordPress Next.js Vercel stack delivers faster load times, better Core Web Vitals, and happier users - all while keeping your editors in the familiar WordPress dashboard they already know.