The Ultimate Guide to Setting Up Next.js and FastAPI

Shabeel Kandi
5 min readJul 4, 2023

In this article, we will show you how to incorporate a FastAPI project into a Next.js application and deploy the entire project on Vercel.

In the past, we used the API Routes feature in Next.js to handle backend functionality. This involved creating custom request handlers for each route using JavaScript or TypeScript in the route.ts file. When deploying to Vercel, the code in the src/app/api directory would be deployed to a Node.js server.

Now, we have the option to create a separate api folder in the project’s root directory for our FastAPI project. This allows us to write the backend code using Python. When deploying the project to Vercel, the platform automatically detects the Python project in the api directory and deploys it as a Python serverless function.

First lets see the Demo :

Step 1: Setting up Next.js Project

To create a Next.js project, use one of the following commands based on your package manager:

--

--