Home
Posts
Andy Fernandez
Posts
Building Modern Full-Stack Applications ...

Building Modern Full-Stack Applications with Next.js, FastAPI, and Supabase on Vercel

Sep 01, 2025

image

Modern web applications demand scalability, developer productivity, and strong type safety across the stack. Many developers experiment with combining modern frontends such as Next.js with Python backends and managed databases, but stitching them together into a coherent, production-ready system is often challenging.

This article introduces a full-stack template designed for production use. It combines a Next.js 14 frontend, a FastAPI backend with Strawberry GraphQL, and Supabase PostgreSQL, all deployed on Vercel. The architecture focuses on type safety, developer experience, and scalability while maintaining a straightforward monorepo structure.

Technical Architecture Overview

Project Structure
The project uses a monorepo managed with pnpm workspaces and Turbo. A Python environment is isolated in the project root with uv.

.
├── apps/
│   ├── web/         # Next.js frontend
│   └── api/         # FastAPI backend
├── turbo.json       # Turbo build orchestration
├── pnpm-workspace.yaml
├── vercel.json      # Vercel deployment config
├── setup.sh         # One-command setup script
└── .venv/           # Python virtual environment (uv managed)

Frontend: Next.js 14 with the App Router, React 18, TypeScript, Apollo Client, TailwindCSS, Radix UI
Backend: FastAPI, Strawberry GraphQL, SQLAlchemy, Alembic, Python 3.11+
Database: Supabase PostgreSQL with Row Level Security and generated TypeScript types
Deployment: Vercel serverless with hybrid routing (Next.js and Python functions)
Tooling: pnpm, uv, Turbo, Jest, Testing Library, pytest, ESLint, Black, isort, flake8, pre-commit hooks, Husky

Monorepo Structure

Why a Monorepo

A monorepo offers several benefits for modern full-stack projects:

  • Unified build pipeline with Turbo caching and parallelization

  • Shared developer tooling for linting, formatting, and type-checking

  • Consistent workflows across frontend and backend

  • Easier CI/CD setup with a single source of truth

Turbo Orchestration

// turbo.json

{
	"tasks": {
    	"build": { "dependsOn": ["^build"] },
    	"dev": { "cache": false, "persistent": true }
	}
}

Turbo orchestrates builds across the apps/ directory. The build process is incremental, which improves both local iteration speed and CI/CD pipelines.

GraphQL API Implementation

The backend is built with FastAPI and Strawberry GraphQL, offering schema-first API development and type safety.

FastAPI with Strawberry

# apps/api/index.pyfrom fastapi import FastAPI

from strawberry.fastapi import GraphQLRouter
import strawberry

@strawberry.type
class Query:
    hello: str = "Hello from FastAPI + Strawberry!"

schema = strawberry.Schema(query=Query)
graphql_app = GraphQLRouter(schema)

app = FastAPI()
app.include_router(graphql_app, prefix="/api/graphql")

Database Integration

  • SQLAlchemy models represent the Supabase PostgreSQL schema

  • Alembic migrations manage schema evolution

  • Supabase provides connection pooling and built-in Row Level Security

  • Queries are secured by policies, ensuring multi-tenant and per-user data isolation

Frontend Architecture

The frontend is built on Next.js 14 with the App Router, enabling server components and optimized rendering patterns.

Apollo Client

The frontend communicates with the backend through Apollo Client.

// apps/web/lib/apollo.ts

import { ApolloClient, InMemoryCache } from "@apollo/client";

export const client = new ApolloClient({
  uri: "/api/graphql",
  cache: new InMemoryCache(),
});

Supabase Client

For cases where direct access to Supabase is required (for example authentication and real-time subscriptions), a Supabase client is initialized.

import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_KEY!
);

Type Safety

Types are generated automatically from both the Supabase database schema and the GraphQL schema, providing end-to-end type safety.

Deployment Strategy

Vercel supports hybrid deployment where Next.js routes and Python serverless functions coexist in the same project.

Routing Configuration

// vercel.json

{
	"builds": [
   		{ "src": "apps/web/package.json", "use": "@vercel/next" },
   		{ "src": "apps/api/index.py",	"use": "@vercel/python" }
	],
	"routes": [
    	{ "src": "/api/graphql/(.*)", "dest": "apps/api/index.py" }
	]
}

Deployment Considerations

  • Python serverless functions can suffer from cold starts; keep dependencies lean and use connection pooling

  • Environment variables are managed securely in Vercel

  • Static assets benefit from Next.js static optimization and Incremental Static Regeneration

Developer Experience

This template emphasizes productivity and consistency.

  • One-command setup: ./setup.sh installs dependencies, creates virtual environments, and runs migrations

  • Hot reloading: Both frontend and backend support live reloads during development

  • Unified tooling: ESLint, Black, isort, flake8, pre-commit hooks, and Husky ensure code quality

  • Testing:

    • Frontend uses Jest and Testing Library

    • Backend uses pytest and pytest-asyncio

Production Readiness

Security, observability, and CI/CD are integrated into the architecture.

  • Security: CORS policies, Supabase RLS, and secure environment variables

  • Observability: Structured logging (loguru) and health endpoints

  • CI/CD: GitHub Actions workflows are compatible with Turbo caching for faster builds

  • Documentation: Architecture guides and setup instructions are stored in the docs/ directory

Performance and Scalability

Advantages:

  • Next.js ISR reduces server load

  • FastAPI serverless functions scale automatically on Vercel

  • Supabase connection pooling ensures efficient database access

  • Turbo build caching improves CI/CD performance

Considerations:

  • Cold starts on Python functions can increase latency

  • GraphQL queries can lead to N+1 problems without dataloaders

  • Connection management in serverless contexts must be carefully tuned

Roadmap of Features

High Priority:

  • Authentication with Supabase Auth (email/password, magic links, OAuth providers)

  • Protected routes using Next.js middleware

  • CRUD examples with RLS enforcement

  • Dashboard UI with profile and navigation

Medium Priority:

  • File upload via Supabase Storage

  • Real-time updates with subscriptions

  • End-to-end test coverage

  • Structured logging

Advanced Features:

  • Vector embeddings with PostgreSQL

  • Automated code quality enforcement with pre-commit hooks

  • Evaluation of Supabase migrations versus Alembic

Comparison with Alternatives

  • T3 Stack (Next.js, tRPC, Prisma, NextAuth): Strong end-to-end type safety in TypeScript but limited for Python developers

  • SvelteKit with FastAPI: Similar separation of frontend and backend but less adoption in enterprise settings

  • Full JavaScript with Node GraphQL: Avoids Python cold starts but misses out on Python’s scientific ecosystem

  • Traditional REST: Simpler to implement but lacks schema validation and flexibility offered by GraphQL

Conclusion and Call to Action

This template demonstrates how to build a modern full-stack application that is production-ready, type-safe, and developer-friendly. By combining Next.js 14, FastAPI with Strawberry GraphQL, and Supabase on Vercel, developers gain a solid foundation that can scale with project requirements.

This architecture is designed for teams that want both the flexibility of Python and the modern frontend capabilities of Next.js, without compromising on scalability or developer experience.

Enjoy this post?

Buy Andy Fernandez a coffee

More from Andy Fernandez

    Item 1 of 1
    PrivacyTermsReport
    Start your Buy Me a Coffee page