The Next.js 13 Bootcamp – The Complete Developer Guide

The Next.js 13 Bootcamp – The Complete Developer Guide

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 127 lectures (14h 9m) | 6.88 GB

Learn all the new features of Next.js 13 by building a restaurant reservation app.

NextJS 13 is an amazing higher level framework, built on top of React, that will totally change the way you think about and build web applications.

In this course, we will learn all about the amazing features NextJS 13 has to offer by building a restaurant reservation application where people can view restaurants and reserve tables.

Firstly we are going to explore the file system in NextJS 13. We are going to learn how to create static and dynamic routes by simply defining files and folders.

We are then going to look at how to handle loading, error, not found, and success states within our application.

Then we will move onto the rendering modes of React components. We will learn about the differences between server and client components and when we should use one over the other.

Following that, we will dive into the server side of NextJS. We will spin up a Postgres database and define the models we need with Prisma (ORM). We will learn how to fetch data from this database, depending on the component we are utilizing.

We will then move to the backend and start defining some authentication endpoints. We will implement authentication for scratch by utilizing middleware, hashers and json web tokens.

The authentication endpoints will be consumed by our client and the user data will be stored globally with the context API.

We then move onto the completing our application by building the availability and scheduling system. We will utilize multiple algorithms and logical thinking to accomplish this.

What you’ll learn

  • Build a large production ready application with Next 13
  • Handle loading, error, success, and not found states appropriately
  • The different rendering modes of React components
  • Handle authentication with middleware and server routes
Table of Contents

1 Course Outline
2 Course Setup

File Based Routing and Navigation
3 Create a Next App
4 Exploring the Files and Folders
5 Adding Tailwind CSS
6 Your Two Options
7 Defining the Pages We Want
8 Understanding File Based Routing
9 Creating Those Pages
10 Challenge Solution
11 The Two Ways of Navigating Between Routes
12 The Link Component
13 Programmatic Navigation With the useRouter Hook

Next Components Server and Client
14 Cleaning Our Code With Components
15 Refactoring Our Pages
16 Some More Refactoring
17 Server vs Client Components
18 Exploring Which Components Should Be Client and Which Should Be Server

Defining Page Layouts and Head Meta
19 Our Code is Not Very DRY
20 Placing Universally Used Components in the Root Layout
21 Nested Components
22 Updating the Head Meta for Each Page

Fetching Data in Server Components
23 A Little SQL Lesson
24 Connecting to a Postgres Database
25 Defining Our SQL Schema
26 Seeding Our Database
27 How We Fetch Data in Server Components
28 Fetching Data in a Server Component
29 A Little TypeScript Lesson
30 Rendering the Fetched Data
31 A Common Error You Might Encounter
32 Fetching a Restaurant By Slug
33 Populating the Data in the Restaurant Page
34 Fetching the Restaurants Menu

Time to Get Your Hands Dirty
35 Challenge 1 Add Query Params
36 Solution for Challenge 1
37 Challenge 2 Fetch Restaurants By Location
38 Solution for Challenge 2
39 Challenge 3 Populating Data
40 Solution for Challenge 3
41 Challenge 4 Fetching Data for Side NavBar
42 Solution for Challenge 4
43 Challenge 5 Adding Query Params
44 Solution for Challenge 5
45 Challenge 6 Filtering By Query Params
46 Solution for Challenge 6
47 Challenge 7 Defining the User and Review Model
48 Solution for Challenge 7
49 Challenge 8 Fetching Reviews Data
50 Solution for Challenge 8
51 Adding a Stars Component
52 More Star Components Stuff

Handling Loading and Error States
53 Introduction to Loading State
54 Adding a Loading State
55 Overriding the Default Loading State
56 Handling Error States
57 Handling Not Found States

Implementing Authentication
58 What is Authentication
59 Adding Material UI
60 Adding the Modal Content
61 Completing the Modal Functionality
62 Steps to Implement Authentication
63 Creating an Endpoint
64 Validating the Users Input
65 Validating That the Users Doesnt Already Have an Account
66 Exploring Password Storage Solutions
67 Hashing Our Password
68 Creating a User
69 Creating and Sending a JSON Web Token
70 Implementing the Sign in Endpoint
71 Identifying Users With Json Web Token
72 Adding Middleware

Global State With Context API
73 Adding Client Side Validation
74 Creating a Custom useAuth Hook
75 Discussing the Authentication State
76 Creating a AuthContext Component
77 Handling the Loading State
78 Handling the Error State
79 Saving the JWT to Our Browsers Cookie
80 Doing the Same Thing For the Signup Function
81 Persisting an Auth State
82 Fixing the Issue Sorry
83 Conditionally Rendering UI Based on the Auth State
84 Implementing the Logout Functionaility

Building an Availability System
85 Intro to Scheduling and Availability
86 The Rules We Will Follow
87 Rendering the Party Size Options
88 Rendering a DatePicker Component
89 Dynamically Rendering the Time Options
90 Understanding Many to Many Relationships
91 Defining Our New Models
92 The Availability Endpoint Overview
93 Building the Availability Endpoint
94 Step 1 Determining the Search Times
95 Step 2 Fetching the Bookings
96 Step 3 Compressing the Booking
97 Step 4 Fetching the Restaurant Tables
98 Step 5 Reformatting the Search Times
99 Step 6 Filtering Out the Booked Tables
100 Step 7 Determining the Availability
101 Step 8 Filtering by Restaurant Time Window
102 Building a useAvailabilities Hook
103 Storing the Reservation Criteria in State
104 Rendering the Available Time Options
105 Converting the Time to a Displayable Time

Building the Scheduling System
106 The Reservation Endpoint
107 Step 1 Validation
108 Step 20 Extracting the Table Availability Logic Into its Own Function
109 Step 25 Determining the Available Tables
110 Step 3 Count the Tables Based on Seats
111 Step 4 Determine the Tables to Book
112 Step 5 Creating the Booking and Linking it to the Tables
113 Dynamically Rendering Data for the Reserve Header
114 Extracting the Query Params
115 Storing Our Inputs in State
116 Creating a useReservation Hook
117 Making a Reservation From the Client
118 Showing a Success State

Appendix A Building the UI
119 The Nav and Header
120 The Search Bar and Restaurant Card
121 The Restaurant Page
122 The Title and Description
123 The Image Gallery
124 The Reservation Card
125 The Menu Page
126 The Search Page
127 The Reserve Page