Next.js FastAPI Template: how to build and deploy scalable apps

Anderson Resende

February 24, 2025

We are excited to announce the first release of our Next.js FastAPI Template! Designed to give developers a solid, production-ready foundation, it focuses on clean architecture and best practices, streamlining the setup of high-performance web applications.

The FastAPI application features full async support from top to bottom — database access, tests, and routes are all asynchronous — ensuring a high-performance backend. While many templates offer some level of async support, it's common to find non-asynchronous components in areas like database access or testing.

Let's take a deep dive into what makes this template special, and we invite you to fork and contribute to this open-source project to help it evolve further.

Why choose this Next.js FastAPI Template

Our template leverages FastAPI's built-in type system, combined with Pydantic and Next.js TypeScript, to create a robust application.

Key benefits include:

Full type safety between frontend and backend through automatic client generation from the OpenAPI schema;
Hot-reload support that updates the client whenever backend routes change;
Seamless integration between FastAPI routes and Next.js components;
Improved development speed and efficiency through automated synchronization;
An ideal foundation for both MVPs and production-ready applications.

Additionally, the Next.js FastAPI Template deploys both backend and frontend to Vercel with minimal configuration, enabling faster product releases with just a few clicks. While most frontend templates can be deployed to Vercel easily, FastAPI backend examples are often incomplete or impractical. This template deploys a complete application — including authentication flow and a simple dashboard for both frontend and backend — on Vercel in just a few steps.

Next.js + FastAPI tech stack: build a scalable web app

We created this Next.js and FastAPI template with modern, relevant technologies for a full-stack application. Here are a few key components, and you can find the complete list in the README:

Zod + TypeScript: end-to-end type safety and schema validation;
fastapi-users: complete authentication system with:
- Secure password hashing by default;
- JWT (JSON Web Token) authentication;
- Email-based password recovery.
Shadcn/ui: beautiful, open-source React components made with Tailwind CSS, ready to be used in modern apps;
OpenAPI-fetch: fully typed client generation from OpenAPI schema;
UV: dependency management and packaging made easy;
Docker Compose: consistent environments for development and production;
Pre-commit hooks: enforce code quality with automated checks before git commits;
Vercel Deployment: easy deployment with minimal configuration. Serverless backend and scalable frontend, all deployable to production with just a few clicks.

For the FastAPI backend, the fastapi-users library streamlines user management and authentication using JWT tokens. This means you don’t need to implement authentication routes yourself, and the library supports customizations during the authentication process.

For the Next.js frontend, we use modern and reliable technologies. With Zod and TypeScript, you get end-to-end type safety and robust schema validation between Next.js and FastAPI, ensuring a more secure and predictable application. The inclusion of Shadcn/ui provides beautiful, customizable React components that are essential for fast-developing modern web applications.

As a modern Next.js and FastAPI application, the project can be run with or without Docker, and we use UV to manage dependencies. Pre-commit hooks are configured with Ruff and ESLint to maintain code quality. We believe in organized code and aim to ensure your Next.js and FastAPI project consistently follows good practices and standards.

How to launch your Next.js + FastAPI project in minutes

Setting up your project is quick and straightforward.

First, install Docker Compose on your system. Once that's complete, you can set up the project and get it running by creating a new repository using our template. The entire process takes just a few minutes and will have your development environment ready to use with minimal configuration.

Clone your new repository and navigate to it:

>>> cd your-project-name

Adjust the .env files for the Backend and Frontend:

>>> cd fastapi_backend && cp .env.example .env
>>> cd nextjs-frontend && cp .env.example .env

Now it’s time to build and run your project, let’s start from the database:

>>> docker compose up db --build

In another terminal, let’s migrate the database:

make docker-migrate-db

There are just two commands left, let’s open a new terminal for each of them, and get the backend and frontend up and running:

>>> docker compose up backend --build

Then, the frontend:

>>> docker compose up frontend --build

Awesome, let’s check the browser, type http://localhost:8000/docs to see the backend API:

Type http://localhost:3000 to see the frontend application:

Take some time to check out the built-in dashboard application. Try creating a user, signing in, and exploring the authentication system. The app is fully integrated with the backend and frontend and even includes tests to guide your development.

What should come next?

Take some time to explore the README and customize your Next.js and FastAPI project. You might want to set up an email server, rename your project, run it locally without Docker, or adjust the .env keys to secure your application.
We recommend taking advantage of the hot-reload feature, It’s already configured in Next.js FastAPI Template. This ensures your backend API and frontend TypeScript client stay in sync automatically during development, saving time and preventing errors.
Finally, consider deploying your Next.js and FastAPI application to Vercel. With just a few steps, you’ll have both the backend and frontend live on a single platform, ready for production.

Partner with Vinta for your next project

Building high-quality applications with Next.js and FastAPI is easier with the right expertise, and our team is here to help. We specialize in web development, MVP creation, and solutions for both startups and established companies. Whether you need help deploying scalable apps, improving API integration, or connecting your frontend and backend, we’re ready to support your goals.

For early-stage startups, we streamline MVP development using modern technologies like Next.js and FastAPI. We also offer post-launch support based on user feedback to ensure continuous improvement. For established teams, we help optimize workflows and enhance performance for long-term success.

With the Next.js FastAPI Template and our expert support, you can launch high-quality products faster, ensuring scalability and a smooth development experience.