vercel-services

Configure multi-service Vercel deployments with services, rewrites, and bindings in vercel.json.

Updated Aug 21, 2025
One-click install
npx skills add https://github.com/Adithiya-S/AI-Study-Companion --skill vercel-services-adithiya-s
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vercel-services
Source: https://github.com/Adithiya-S/AI-Study-Companion/tree/main/.agents/skills/vercel-services
Command: npx skills add https://github.com/Adithiya-S/AI-Study-Companion --skill vercel-services-adithiya-s

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Deploying a frontend and backend as one cohesive Vercel project requires correctly wiring the services key, ordered rewrites, and private service bindings in vercel.json, which is error-prone without guidance. ## Core Features & Use Cases - Service Composition: Define multiple services (e.g., a Vite frontend and a FastAPI backend) with independent roots, entrypoints, and build settings in one vercel.json. - Routing & Ingress: Configure ordered top-level rewrites, service-scoped prefix stripping, SPA catch-alls, and subdomain-based routing. - Private Bindings: Connect services internally through deployment-aware binding environment variables without exposing public routes. - Use Case: Put a Next.js frontend and a Python backend in one project, route /api/(.*) to the backend, and let the frontend call it privately via a BACKEND_INTERNAL_URL binding. ## Quick Start Ask the AI to configure a vercel.json that deploys your frontend and backend together as Vercel Services with an /api rewrite and a private service binding.

Frequently Asked Questions about vercel-services

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I deploy a frontend and backend together on Vercel?

Define both as entries under the services key in vercel.json, each with its own root directory. Then add ordered top-level rewrites, such as sending /api/(.*) to the backend service and a catch-all to the frontend.

How do Vercel service bindings work?

Declare a binding on the caller service naming the target service and an environment variable, such as BACKEND_INTERNAL_URL. Vercel injects a deployment-aware URL at runtime, letting services communicate privately without public routes.

Why does my Vercel backend return 404 for every /api route?

Vercel preserves the original request path, so /api/users reaches the backend as /api/users. Either configure the backend to handle the prefix, such as FastAPI root_path, or strip it with a service-scoped rewrite.

Can a Vercel service stay private with no public route?

Yes. A service without a matching top-level rewrite is unreachable from the public internet and only accessible through bindings. Note that bindings grant network reachability, not application-level authentication.

Why does my subdomain routing work in production but not in previews?

Preview deployments get a single generated URL, so host-based rewrite rules never match there. Keep a subpath rewrite to the same service and use a relative URL like /api in the frontend.

When should I use separate Vercel projects instead of Services?

Use separate projects when teams need to deploy and roll back services independently, since every Services deployment ships all services together. Also skip Services when one framework like Next.js can own the whole app.