Services routing and communication

When a project has multiple services, Vercel merges their routes into a single routing table and distributes incoming requests based on each service's route prefix.

Each web service has a routePrefix that determines which requests it receives. Vercel evaluates prefixes from longest to shortest (most specific first), with the primary service (prefix /) as the catch-all.

For example, with a Next.js frontend at / and a FastAPI backend at /svc/api:

When you configure routePrefix, Vercel automatically mounts backend services at that base path, so you do not need to configure a framework-specific root path for backends.

For frontend frameworks such as Next.js mounted on a subpath, you still need to configure the app's base path (for example, basePath in next.config.js) to match routePrefix.

Vercel automatically generates environment variables so services can communicate with each other.

For each web service, Vercel injects:

For example, for a project with two services, a Next.js "frontend" mounted at the root and a FastAPI "backend" mounted at "svc/api", Vercel would generate the following environment variables:

Client-side variables use relative paths (the route prefix only) to avoid CORS issues. The browser resolves them against the current origin, so they work across preview deployments and custom domains.

If you define an environment variable with the same name in your project settings, your value takes precedence.