Next.js + FastAPI + Bindings Starter

Next.js + FastAPI + Bindings

This example shows a monorepo using Vercel Services with a Next.js frontend and a private FastAPI backend.

Demo

https://nextjs-fastapi-services-bindings.vercel.app/

How it works

The project is structured as a monorepo:

1
nextjs-fastapi-bindings/
2
├── backend/
3
├── frontend/
4
└── vercel.json

Services are configured in vercel.json:

1
{
2
  "services": {
3
    "frontend": {
4
      "root": "frontend/",
5
      "framework": "nextjs",
6
      "bindings": [
7
        {
8
          "type": "service",
9
          "service": "backend",
10
          "format": "url",
11
          "env": "BACKEND_URL"
12
        }
13
      ]
14
    },
15
    "backend": { "root": "backend/", "entrypoint": "main:app" }
16
  },
17
  "rewrites": [
18
    {
19
      "source": "/(.*)",
20
      "destination": { "type": "service", "service": "frontend" }
21
    }
22
  ]
23
}

Vercel will route all requests to the frontend. Next.js API routes will be able to access the backend at BACKEND_URL.

Running Locally

1
vercel dev

Open http://localhost:3000 and try:

• /api/hello (Next.js API route)
• /svc/api/status (FastAPI via Next.js API route)

Learn More

• Vercel Services - learn how services work on Vercel.
• Next.js Documentation - learn about Next.js features and API.
• FastAPI Documentation - learn about FastAPI features and API.