Full stack FastAPI template Next.js

Next.js v16 fork of the official fastapi/full-stack-fastapi-template template. Server components, server actions, HttpOnly cookie auth, ShadcnUI with TailwindCSS v4, simplified local development environment and Docker production.

Demo

Docker: https://full-stack-fastapi-template-nextjs.arm1.nemanjamitic.com

Vercel: https://full-stack-fastapi-template-nextjs.vercel.app

Screenshot

Credits

• The original repository: fastapi/full-stack-fastapi-template
• Next.js client side rendered PR: https://github.com/fastapi/full-stack-fastapi-template/pull/1733
• HttpOnly cookie PR: https://github.com/fastapi/full-stack-fastapi-template/pull/1606

Features

• Next.js v16, server components
• React Hook Form and server actions for forms
• HttpOnly cookie auth, enables SSR
• Hey Api with client-next
• Suspense, error boundaries
• Turborepo monorepo, TailwindCSS v4, ShadcnUI
• Validated env vars with Zod
• Simple local dev environment, simplified Docker production

Todo

• Register page, Github login
• Migrate Playwright tests
• Unit tests with Vitest, Testing Library
• Tag Docker images
• API sort params
• Support emails, Sentry from the original repo
• no-monorepo branch
• Runtime only env vars, reusable build
• Env vars with alizeait/next-public-env
• Versioning with changesets/changesets or semantic-release/semantic-release
• API internationalization
• Update Python
• Open graph, SEO, analytics
• Tailscale Github Actions
• Integration tests frontend and backend
• Deploy with Vercel

Installation and running

Docs: docs/running.md

Deploy to Vercel

If you want to deploy with Docker, use the main branch. If you want to deploy with Vercel, use the vercel-deploy branch.

1
# Docker
2
git checkout main
3

4
# Vercel
5
git checkout vercel-deploy

Similarly to how you need two separate containers to deploy the app with Docker, you also need two separate deployments in Vercel to deploy the frontend and backend. You will configure them to be aware of each other using SITE_URL and API_URL, which they use to communicate with each other.

You can deploy to Vercel either using "Vercel button" or Vercel CLI method.

Vercel button

Clicking the "Deploy" button above will take you to the Vercel deployment wizard. It will create a single GitHub repository and two separate Vercel projects, pointing to the /backend and /frontend/apps/web directories for the backend and frontend, respectively.

No environment variables will be set automatically, you will need to configure them manually after the wizard completes. During setup, you will be prompted to add the Neon integration for a Postgres database. Make sure to select the backend project as the integration target. Finally, you will need to run the database migrations and seed the newly provisioned database.

Vercel CLI

You can also deploy to Vercel from you local development environment using Vercel CLI.

Documentation

You can find more details about deploying using both "Vercel button" and Vercel CLI methods in the documentation linked bellow.

Frontend docs: docs/vercel-deployment-frontend.md

Backend docs: docs/vercel-deployment-backend.md

Routes

1
# Frontend
2
http://localhost:3000
3
https://full-stack-fastapi-template-nextjs.arm1.nemanjamitic.com
4

5
# Backend
6
http://localhost:8000/docs
7
https://api-full-stack-fastapi-template-nextjs.arm1.nemanjamitic.com/docs
8

9
# openapi.json
10
http://localhost:8000/api/v1/openapi.json
11
https://api-full-stack-fastapi-template-nextjs.arm1.nemanjamitic.com/api/v1/openapi.json

License

MIT license: License