Build Phases

Phase 9 — Deployment

Deploy to Vercel or Cloudflare Pages and verify everything works.

Pre-Deployment Checklist

pnpm tsc --noEmit          # Check TypeScript errors
pnpm eslint src/           # Run linter
pnpm build && pnpm start   # Test production build locally
# Visit all key routes at localhost:3000

Deploy to Vercel

# Option A: GitHub auto-deploy (recommended)
git push origin main   # Vercel deploys on every push

# Option B: Vercel CLI
npm install -g vercel
vercel --prod

Add environment variables in Vercel → Settings → Environment Variables:

NEXT_PUBLIC_WP_API_URL  =  https://cms.yourdomain.com/wp-json/wp/v2
REVALIDATION_SECRET     =  your-secret-key

Deploy to Cloudflare Pages

pnpm add -D @cloudflare/next-on-pages

# Add to package.json scripts:
# "pages:build":  "npx @cloudflare/next-on-pages",
# "pages:deploy": "wrangler pages deploy .vercel/output/static"

pnpm pages:build && pnpm pages:deploy

TIP

Cloudflare Pages gives you unlimited bandwidth on the free tier. For a documentation or marketing site this is almost always the better free option over Vercel Hobby.

Post-Deploy Verification

curl -I https://yourdomain.com/            # 200 OK
curl -I https://yourdomain.com/blog/       # 200 OK
curl -I https://yourdomain.com/sitemap.xml # 200 OK

# Test revalidation webhook
curl -X POST "https://yourdomain.com/api/revalidate?secret=your-secret" \
  -H "Content-Type: application/json" \
  -d '{"post_type":"post","slug":"test"}'

CI/CD Flow Summary

Trigger	What happens
Push to `main`	Vercel auto-deploys full production build
Push to any branch	Vercel creates a preview URL for that branch
Publish post in WordPress	Webhook fires, Next.js revalidates affected pages only
Pull request opened	Vercel posts a preview link in the PR comments

Monitoring & Logs

Vercel Dashboard — real-time function logs, build logs, analytics
Cloudflare Analytics — traffic, bandwidth, threat blocking
Google Search Console — indexing status, search performance
Hostinger hPanel — WordPress error logs, PHP logs

TIP

Set up Vercel Speed Insights (free) to monitor Core Web Vitals in production. Go to your Vercel project → Analytics → Enable Speed Insights.

PreviousPhase 8 — SEO NextHacks & Gotchas