Python on Vercel

Deploy your Next.js frontend and Python API together as one Vercel project.

We'll work on Hazel Home, a furniture storefront that still uses mock inventory even though its FastAPI backend is ready. We'll connect the two locally, with Next.js at / and FastAPI under /api, then deploy the finished app under one domain.

Course repo: vercel/academy-python-course

What You'll Build

A furniture inventory app with a FastAPI endpoint at /api/items and a Next.js frontend that displays the inventory. We'll configure them as Vercel Services in one Vercel project. Each application has its own root directory, and a service binding lets Next.js call FastAPI.

Prerequisites

• uv for Python and dependency management; we use it to set up Python 3.12 in Lesson 1.2 (supported versions)
• Familiarity with FastAPI (you've written routes and run a dev server)
• Basic Node.js and npm knowledge (enough to run a Next.js app)
• A Vercel account (Hobby supports a personal learning project; its fair-use policy excludes commercial use)

Optional Companion Skill

The companion Academy skill can help you debug vercel dev and check service routing to backend/main.py. It also helps you connect frontend/app/page.tsx through BACKEND_URL and verify your deployment.

Install it once:

npx skills add vercel-labs/academy-skills --skill=python-on-vercel -y

Then invoke it in chat with prompts like:

• "Use the python-on-vercel skill and check why /api/items returns 404."
• "Use the python-on-vercel skill and review my starter/frontend/app/page.tsx wiring."
• "Use the python-on-vercel skill and walk me through deploy verification."

What's Covered

Section 1: Setup. Install the Vercel CLI, then run each side of the starter project locally.

Section 2: Connect the Apps. Configure Services, run both applications with vercel dev -L, and replace the frontend's mock inventory with data fetched through a service binding.

Section 3: Deploy to Vercel. Deploy the project and verify the frontend and API in production.