Build a Serverless JAMStack App Using Next.js, Tailwind CSS, and Fauna

61% off est. retail value of $49. With this reward you are saving $30. Lifetime access to the course once it is published.

Early bird

Exclusive 1-on-1 coding session with the instructor (30min) + Lifetime access to the course once it is published.

Exclusive coding session (30min)

2x Exclusive 1-on-1 coding session with the instructor (30min) + Lifetime access to the course once it is published.

2x Exclusive coding session (30min)

Course overview

What project will you build?

What is Next.js? Why should you use it?

Pre-rendering: static generation (SSG) & server-side rendering (SSR)

The page-based routing system

Build fullstack React apps

Tailwind CSS overview

Fauna overview

Introduction

Create a Next.js app from scratch with create-next-app

Setup Tailwind CSS with Just-in-Time Mode

Design the application layout using React and Tailwind CSS

Use the Head component to dynamically add meta tags

Create a custom statically generated 404 error page

Easily add dark mode support with next-themes and Tailwind CSS

Authenticate a Next.js app with NextAuth.js and built-in OAuth providers (Github, Google, etc...)

Setup a new database and collection to store blog posts using the Fauna dashboard

Create indexes to make finding documents faster, sort and filter results, and enforce unique values

Store data for users in Fauna using a NextAuth's adapter

Build API routes to create, read, update, and delete data in FaunaDB

Use static generation to pre-render a page at build time with getStaticProps

Use incremental static regeneration for dynamic pages with getStaticPaths in Next.js

Create a reusable blog post editor component with Markdown support and syntax highlighting

Listen to Next.js Router events and display a progress bar when changing route

Create an infinite loading list with React hooks and SWR

Protect server-side rendered pages to prevent a flash of unauthenticated content before redirecting

Launch and deploy a Next.js app in production on Vercel imported from Github

Project: Build a micro-blogging app

Learn to build a full-stack application from scratch using some of the best modern web technologies: React / Next.js, Prisma, and Supabase.

## What you will learn

The app that we'll work on in this course is called ***SupaVacation***. It is an online marketplace for vacation rentals where users can browse through all the properties for rent, bookmark their favorite ones, and even rent their own properties.

> Here's [a live demo](https://supa-vacation.vercel.app/) of the app's final version. It is what your app should look likes after completing this course. Feel free to play with it to get an overview of all the features you'll be working on.

[![SupaVacation - Homepage](https://res.cloudinary.com/alterclass/image/upload/v1645205079/courses/322389284337222224/SupaVacation_-_Homepage_w7fbvl.png)](https://supa-vacation.vercel.app/)

So, in this course, you'll learn how to build this full-stack app using the following technologies: 

- **Next.js** -  The React framework for building the UI of the app and the REST API
- **NextAuth.js** - For implementing passwordless and OAuth authentication 
- **Supabase** - For persisting the app data into a PostgreSQL database and storing media files
- **Prisma** - For making it easy to read and write data from our app from and to the database

## What the course will cover

Even if this app is a simplified version of a more advanced rental marketplace such as Airbnb, this course covers many topics and technical concepts necessary to build a modern full-stack app.

At the end of this course, you should know how to use all the technologies mentioned above, but most importantly, you will know how to build any full-stack app using those technologies. You will progress at your own pace, and I'll guide you along the way. My goal is to give you the tools and techniques you'll need to build a similar app by yourself after the course.

In other words, this course will not only teach you how to use those technologies, but it will give you the right balance between theory and practice to help you understand all the essential concepts so you can later build your own apps from scratch with confidence. 

So, here are all the topics we'll cover:

- Building a React app and a REST API using **Next.js**
- Passwordless and OAuth authentication using **NextAuth.js**
- Securing pages and API routes
- Modeling data using **Prisma**
- Persisting data into a relational database and storing media files using **Supabase**
- Going to production and deploying to **Vercel**

## Prerequisites

This course is beginner-friendly, but I strongly recommend at least some experience with building apps using **React** with hooks, since we will be using **Next.js** which is a React framework.

Besides that, I assume you have a basic knowledge of **Node.js** for the API implementation part but also a basic understanding of relational databases as we will use Supabase, which comes with PostgreSQL as the database.

Of course, I assume you already have some JavaScript experience. Otherwise, it will be like learning to run before you can walk 😉

Build a Full-Stack App with Next.js, Supabase & Prisma

Project overview and prerequisites

Development environment

Getting started

Create a PostgreSQL database

Initialize Prisma in your project

Setting up the database

Define a data model in the Prisma Schema

Generate the Prisma Client

Create a table in Supabase with Prisma Migrate

Use Prisma Studio to explore your data

Creating our first schema

Query data in Next.js with Server-Side Rendering (SSR)

Create data from Next.js using Prisma Client

Query data in Next.js with Static Generation (SSG)

Enable Incremental Static Generation

Store and serve files from Supabase Storage

Interacting with our data from Next.js

Add magic link authentication using NextAuth.js

Check the current session and sign out from the app

Use a custom React component to sign in

Customize the sign-in email and send a welcome email to new users

Authenticate users with an OAuth provider (Google)

Adding authentication to a Next.js app

Define a One-to-Many relation in the Prisma Schema

Create a related record using Prisma Client

Query for data with relations with SSR

Update and delete records with Prisma Client

Instantiate a global Prisma Client instance

Challenge: Like your favorite homes

Modelling relations and performing CRUD operations

Deploying Next.js on Vercel

Deployment

Thank you!

Wrapping Up

All courses