Nextjs + FastAPI template for SaaS Part3

This is the last article in the series on the Nextjs + FastAPI template for SaaS. It took a while to publish this article as we promised we would share a template on GibHub. But here it comes!

Template landing page by the author

Template landing page by the author (dark mode)

GitHub - Sheldenburg/nextjs-fastapi-template: Full stack, modern web application template. Using…
Full stack, modern web application template. Using FastAPI, Nextjs, SQLModel, PostgreSQL, Docker, GitHub Actions…github.com

And if you ever want to revisit part 1 and part 2, you can find the links at the end of this article.

One reason for the delay in creating this repository is that Next.js has undergone significant updates since Next.js 13, particularly regarding the app router and server-side rendering. Now, with Next.js 14 released, there is more maturity in terms of server-side rendering and the app router.

Disclaimer: I used the backend of the repository below, created by the founder of FastAPI, and replaced the React.js frontend with Next.js.

GitHub - tiangolo/full-stack-fastapi-template: Full stack, modern web application template. Using…
Full stack, modern web application template. Using FastAPI, React, SQLModel, PostgreSQL, Docker, GitHub Actions…github.com

There are several reasons why we chose to build with Next.js (a full-stack framework built on top of React) instead of React alone:

• Dependencies reduction

A barebones React.js application would require the installation of dependency packages to achieve multi-page routing, manage API requests, caching, etc. While there are various solutions available, such as using @tanstack/react-router for routing and @tanstack/react-query + axios for managing API requests and caching in the original repository, a Next.js application integrates all these functionalities without the need for third-party libraries. Additionally, Next.js 14 (app router) employs file-based routing, automatically handling routing via the folder structure.

• Server side rendering

Data fetching and mutation in a Next.js application primarily occur on the server side, although client-side data fetching is also possible. This eliminates the need for ‘useEffect’ and other cumbersome boilerplate code for client-side data fetching. Server-side rendering also offers performance benefits.

• Popularity

Next.js is gaining popularity, with a significant number of frontend projects and YouTube tutorials based on Next.js that are beginner-friendly.

You can easily spin up the full stack using Docker Compose:

docker compose up -d

Frontend: Nextjs

Backend: FastAPI (Python)

Database: Postgres

Load balancer & reverse proxy: Traefik 

DB dashboard: Adminer

Screenshot from Docker Desktop (by the author)

Here is the high level architecture. Traefik is used as load balancer and reverse proxy for ingress traffic. This protects backend and database from the internet. 

Architecture by the author

Roadmaps 

We will continue updating this template to include a few more popular features. 

• Chat with LLMs

• RAG (Retrieval Augmented Generator)

• Multi-modality of LLMs

• Image generation

• Long-lasting background jobs with Celery and Redis

• Supabase connection