Next.js + FastAPI Starter

Next.js + FastAPI

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

Demo

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

How it works

The project is structured as a monorepo:

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

Services are configured in vercel.json:

1
{
2
  "services": {
3
    "frontend": { "root": "frontend/", "framework": "nextjs" },
4
    "backend": { "root": "backend/", "entrypoint": "main:app" }
5
  },
6
  "rewrites": [
7
    {
8
      "source": "/svc/api/:path*",
9
      "destination": { "service": "backend" }
10
    },
11
    {
12
      "source": "/(.*)",
13
      "destination": { "service": "frontend" }
14
    }
15
  ]
16
}

Vercel will route requests to the backend service for URL with paths starting with /svc/api/ and to frontend for all other URLs.

Running Locally

1
vercel dev

Open http://localhost:3000 and try:

• /api/hello (Next.js API route)
• /svc/api/status (FastAPI 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.