Vercel is now Vercel for backends. Your Next.js frontend and Python API can deploy together as one Vercel project.
Hazel Home gives us the test case: a furniture storefront still using 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-labs/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. Both parts deploy together as one Vercel project.
Prerequisites
- Python 3.12+
- 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
This course has a companion Academy skill that helps you debug vercel dev, route matching in api/index.py, wiring app/page.tsx to /api/items, and deployment checks.
Install it once:
npx skills add vercel-labs/academy-skills --skill=python-on-vercel -yThen invoke it in chat with prompts like:
- "Use the
python-on-vercelskill and check why/api/itemsreturns 404." - "Use the
python-on-vercelskill and review mystarter/app/page.tsxwiring." - "Use the
python-on-vercelskill 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. Use vercel dev to serve the project from one local URL, then replace the frontend's mock inventory with data from FastAPI.
Section 3: Deploy to Vercel. Deploy the project and verify the frontend and API in production.
On this page