Vercel v0 via webhook

Vercel v0 connects to RankPine via webhook. v0 adds a normal server route to the existing Next.js project; the deployed Vercel Function receives RankPine's signed payload through the existing Webhook / REST connection.

Before you start

• Import or open the existing v0 Project. v0 supports GitHub and uploaded projects; work in the Project that owns the production Vercel deployment.
• Connect a persistent database already suited to the project. Do not use a module-level map or Vercel's ephemeral filesystem for article storage.
• Decide the canonical article route and sitemap source.

v0's current documentation puts project variables under Project menu → Environment Variables, keeps non-NEXT_PUBLIC_ values server-side, and publishes from Publish → Publish to Production. See the official project workflow, security guidance, and deployment guide.

1. Add the Route Handler

Download the RankPine receiver template into server-only code, then call it from app/api/rankpine/webhook/route.ts. A Next.js Route Handler receives a Web Request, so do not call request.json() before the template reads the raw text.

Copy-paste build instruction

Add RankPine publishing to this existing v0/Next.js project via one secure webhook. Inspect the current App Router, database, article model, rendering, cache strategy, and sitemap first. Preserve unrelated application code and visual design.

Add https://rankpine.com/docs/templates/rankpine-webhook-receiver.ts to server-only code and create app/api/rankpine/webhook/route.ts. Export POST and pass the original Request directly to the receiver so HMAC verification uses the exact raw body before JSON parsing. Read RANKPINE_WEBHOOK_SECRET from a server-only environment variable, enforce a five-minute freshness window, validate the event/header/payload, and return the template's stable JSON failures.

Use the project's existing persistent database. Upsert by unique article.id and preserve title, slug, HTML, Markdown, metadata, sources, featured and inline images, and scheduledFor. Return a stable database ID and canonical URL. Implement refreshSitemap by revalidating or rebuilding the sitemap/content index this project actually serves; RankPine itself does not update it.

Add focused tests for raw-body HMAC, stale/future requests, invalid payloads, persistence errors, and same-ID updates. Do not add another framework, expose the secret with NEXT_PUBLIC_, replace existing routes, or deploy. Show the files/schema changed and the final endpoint path.

2. Add the environment variable

1. Open the v0 Project menu → Environment Variables or choose Inspect on Vercel and open the project's Environment Variables settings.
2. Add RANKPINE_WEBHOOK_SECRET to Production and to Preview only if you intend to test a preview deployment.
3. Do not name it NEXT_PUBLIC_RANKPINE_WEBHOOK_SECRET; v0 documents that the prefix exposes a value to browser code.
4. Redeploy after adding or rotating the variable.

3. Publish and copy the endpoint

Choose Publish → Publish to Production. v0 creates or updates the connected Vercel Project and shows its stable production URL. Append the route:

https://your-project.vercel.app/api/rankpine/webhook

If Vercel Deployment Protection is enabled, ensure this production route is reachable by RankPine without a Vercel login. HMAC verification remains the route's authentication.

4. Connect it in RankPine

Open Settings → Integrations → Website builders via webhook → Vercel v0 and choose Connect via webhook. Enter the production endpoint and matching secret. Leave HTML and Markdown enabled so the receiver can preserve both.

5. Verify the deployment

The connection sends a verification event first. Then publish a test article and confirm Vercel Function logs, one database row keyed by article.id, the canonical page, and the sitemap. Republish an edit to verify update-in-place and a stable response ID/URL. A v0 preview or successful TypeScript check is not proof of the production database, environment variable, route protection, or sitemap behavior.