Vercel Logo

Deploy to Production

You've already done the hard part. The project structure is what Vercel expects: Next.js at the root, Python in api/, dependencies declared in package.json and pyproject.toml. vercel dev has been running everything under one URL. Shipping to production is the same command without the dev.

Outcome

Deploy the combined project to Vercel with vercel deploy --prod and confirm both the Next.js frontend and the FastAPI backend are live under a single domain.

Fast Track

  1. cd starter (the project root)
  2. vercel deploy --prod
  3. Open the deployment URL and visit both / and /api/items

Hands-On

Deploy

From the starter/ root:

vercel deploy --prod

The project is already linked from vercel dev in Section 2, so the CLI skips the setup prompts and starts building. A few seconds later:

✓ Deployed to production.

https://hazel-home.vercel.app

One URL. Both apps.

What Vercel auto-detected

While the deploy was running, Vercel did three things without being told:

  • Detected Next.js from package.json. Built the app with Turbopack, served / and any other app-router routes as the main frontend.
  • Detected Python functions in api/. Installed pyproject.toml dependencies, packaged api/index.py as a serverless function, and routed /api/* requests to it.
  • Wired routing so / and /api/* share one domain. Same-origin everywhere, no CORS, no rewrites.

No vercel.json. No framework preset to pick manually. The project structure is the config.

Verify the frontend

Open the deployment URL in a browser:

https://hazel-home.vercel.app

The furniture listing loads with real data from FastAPI. The server component built the URL from process.env.VERCEL_URL (auto-injected in production), fetched /api/items from the same deployment, and rendered the list.

Verify the backend directly

Hit the backend path:

https://hazel-home.vercel.app/api/items

FastAPI returns the same JSON it's been returning all along. Same app, different host.

What you didn't have to do

Pause and notice the things that aren't here:

  • No second Vercel project for the Python backend
  • No CORS config, because there's no cross-origin call
  • No BACKEND_URL or API_URL env var to set by hand, because the frontend and backend share a domain
  • No coordination between two dashboards. One project, one log stream, one team

The Python-and-Next.js deployment story that usually takes two projects and a stack of environment variables becomes one command.

Cold starts

Vercel runs Python functions as serverless. The first request after a period of inactivity may take an extra second or two while the function initializes. Subsequent requests are fast.

Flask and Django work the same way

Same pattern, different framework. Put Flask in api/index.py with a top-level app = Flask(__name__), and Vercel picks it up. Django uses its own preset, but the project layout (Python in api/, JavaScript at the root) is the same.

Try It

Verify the full stack:

curl https://hazel-home.vercel.app/api/items
[{"id":1,"name":"Fernwood Sectional","category":"Seating","price":2499.0,"in_stock":true},...]
curl -s https://hazel-home.vercel.app | grep "Fernwood"
Fernwood Sectional

The first confirms FastAPI is serving data at /api/items. The second confirms the Next.js server component fetched from FastAPI, rendered the result, and returned HTML to the browser.

Troubleshooting

Deploy succeeds but /api/items returns a 404: The FastAPI routes don't include the /api prefix. Open starter/api/index.py and confirm the routes are @app.get("/api") and @app.get("/api/items"), not / and /items.

Deploy fails with "No module named fastapi": pyproject.toml isn't at the project root or dependencies aren't declared. Check that starter/pyproject.toml exists and lists fastapi under dependencies.

Frontend loads but items don't appear: The fetch is failing. Check the deployment logs in the Vercel dashboard. The most common cause is process.env.VERCEL_URL being unexpectedly undefined. The VERCEL_URL variable is injected automatically on all plans, but if you're testing preview deployments from a branch, double-check the Vercel dashboard shows it as a system env var.

You want to clean up: When you're done with the course, you can delete the hazel-home project from the Vercel dashboard to remove the deployment.

Done-When

  • vercel deploy --prod succeeds from the starter/ root
  • https://hazel-home.vercel.app loads the furniture listing page
  • https://hazel-home.vercel.app/api/items returns the FastAPI JSON
  • You can confirm the frontend is actually fetching from the backend (edit api/index.py, redeploy, see the change)

Solution

cd starter
vercel deploy --prod

One command, both apps, one domain. The Python backend and the Next.js frontend live in the same Vercel project, and you never had to touch a second deployment target.

Was this helpful?

supported.