Files
llm-wiki/raw/articles/vercel-services-run-multiple-frameworks-2026.md
2026-07-03 00:38:05 +09:00

3.7 KiB

source_url, ingested, sha256, discovered_from
source_url ingested sha256 discovered_from
https://vercel.com/changelog/run-multiple-frameworks-in-one-project-with-vercel-services 2026-07-01 0ad2bffeb7a78a490f38bc0202e1095a8489a01804f96f214e5777414f5ed639
platform channel_id channel_name message_id author_id posted_at message_excerpt
discord 1028287639918497822 chat 1521868662993064179 890908900520505354 2026-07-01T13:22:44.210000000Z Direct #chat link from toymaker to Vercel Services changelog for multiple framework services in one project.

You can now deploy multiple frontends and backends together within a single Vercel project.

Vercel Services is now available, allowing you to deploy full stack apps with multiple frameworks on a shared domain, where services talk to each other privately and deployments build, preview, and roll back together.

Services are defined in vercel.json:

{
  "services": {
    "my_frontend": {
      "root": "frontend/",
      "framework": "nextjs"
    },
    "my_backend": {
      "root": "backend/",
      "entrypoint": "main:app"
    }
  },
  // my_backend has no public route
  // it is only reachable from my_frontend internally
  "rewrites": [
    { 
      "source": "/(.*)", 
      "destination": { "service": "my_frontend" }
    }
  ]
}

Vercel handles routing, builds, and environment variables automatically.

From there, your services show up across the dashboard and CLI:

  • The Deployments panel visualizes the services graph
  • The Logs UI filters by individual service
  • vercel dev runs every service locally for a production-like environment

A visualization of Services Graph in the Deployment UI A visualization of Services Graph in the Deployment UI

A visualization of Services Graph in the Deployment UI

Service bindings

Services talk to each other internally with the new bindings key, without routing through the public internet:

{
  "services": {
    "my_frontend": {
      "root": "frontend/",
      "framework": "nextjs",
      "bindings": [
        {
          "type": "service",
          "service": "my_backend",
          "format": "url",
          "env": "BACKEND_INTERNAL_URL"
        }
      ]
    },
    "my_backend": { ... }
  },
  "rewrites": [ ... ]
}

The binding exposes my_backend to my_frontend as an environment variable.

The frontend reaches the backend privately through the URL in BACKEND_INTERNAL_URL:

export async function GET() {
  const url = new URL("/users", process.env.BACKEND_INTERNAL_URL);
  const res = await fetch(url);
  const users = await res.json();
  return Response.json(users);
}

The route fetches from my_backend using that variable and returns the response.

Framework-defined infrastructure

Most frameworks run with zero configuration. Framework-defined infrastructure means each service's framework is auto-detected and auto-provisioned, from FastAPI and Flask to Express and Hono, with first-class support for Go and Rust. Services run on Fluid compute with Active CPU pricing, so you only pay for the time your code is actually running.

Read the documentation to get started.