Full Stack Next.js, FastAPI, PostgreSQL Tutorial

12.25.2021

Welcome to the Full Stack Next.js, FastAPI, and PostgreSQL (NFP) Tutorial. I am excited to announce the official launch of the Full Stack NFP Tutorial. The NFP Tutorial is a 5 part series on how to build a boilerplate web application to be used as a starting point for web projects. It can also be used as a cheat sheet on how to set up this tech stack from scratch. There are many good tools and frameworks to choose from. However, there are a few that have risen to the top of my list of preferred tools.

Tech Stack

Next.js is a front-end framework that is built on React, the most popular front-end UI library at this time. It gives you everything React gives you plus more. It supports server-side rendering, static-site generation, and file-system-based routing out of the box. There’s no need to mess around with complicated build tools. With Next.js, you can go straight to writing your application with minimal setup. I’ve also included TailwindCSS, a simple and powerful styling system.

FastAPI is a back-end API framework for Python. It has the perfect balance of “convention over configuration” and flexibility. FastAPI includes a type system for your data validations as well as automatic API documentation. Many other micro-frameworks don’t include these things, which means additional work to set them up yourself. The performance is also claimed to be on par with Node.js because of async support, but I haven’t verified this for myself yet. I may conduct an experiment in a future article.

PostgreSQL is a relational database system. It has good performance, reliability, and has been around for a long time. I have used PostgreSQL in many projects and so it is what I’m most familiar with, hence why I chose it for this boilerplate. However, you are free to swap out any part of this boilerplate with something more suitable for your project.

Ubuntu is a popular Linux distro that we will be deploying our application to. We will be using shell scripts to automate the deployment. In order to keep things simple, I have opted out of using any configuration management or container orchestration tools for the deployment. A single cloud server is probably sufficient for most small projects.

Docker is used to bring consistency to the setup and development processes through containerization of the backend and database services. This part is probably more relevant when working on a larger team. Solo devs may prefer to develop on the host machine for simplicity. Either way, I have included this as a bonus section.

Table of Contents

  1. How to Build a Full Stack Next.js, FastAPI, PostgreSQL Boilerplate Tutorial
  2. How to Deploy Next.js, FastAPI, and PostgreSQL with Shell Scripts
  3. How to Develop a Full Stack Next.js, FastAPI, PostgreSQL App Using Docker
  4. How to Build a User Authentication Flow with Next.js, FastAPI, and PostgreSQL
  5. How to Test an API with Pytest and Requests

Conclusion

Thank you for reading. This was my first attempt at writing content for Medium. Please clap and follow if you have found this content useful. This tutorial was written for anyone looking to learn this niche tech stack. The tutorials were also designed to be as standalone as possible, so you don’t have to read the entire tutorial, but only what you need. Please feel free to leave feedback, suggestions, or questions in the comments. Good luck on your programming journey.