Complete Next.js Developer in 2022: Zero to Mastery

1 Complete Next.js Developer in 2022: Zero to Mastery
2 Next.js Course Outline
3 Section Overview
4 What is Next.js?
5 Benefits of Next.js and Different Rendering Techniques
6 Performance with Next.js
7 Image Component in Next.js
8 File Based Routing and SEO
9 Serverless Functions in Next.js
10 Next.js vs Create React App
11 Project overview: What are we building?
12 Create a Next.js app: Zero Config
13 How To Upgrade Your Next.js Version
14 Next.js setup project walkthrough
15 _app.js Solution with Footer
16 What is Fast Refresh?
17 What are CSS modules?
18 Let’s get ready for Home Page
19 App background
20 Banner Component
21 Mobile First Development & Banner Component Styling
22 Next.js Head Component
23 Routing in Next.js
24 Add routing for Coffee Store Page
25 What is Dynamic Routing?
26 Add route using Link component
27 Add routes to Dynamic Pages with Link Component
28 Solution: Routing
29 Style our homepage
30 Hero Image Generator
31 Add Hero Component
32 Next.js Image component
33 Hero Image on Home Page
34 Setup fonts in Next.js
35 Load fonts on the page
36 Document in Next.js
37 Apply fonts in Document
38 What is SEO?
39 Pre-rendering in Next.js
40 Plain React vs Next.js app
41 Different Rendering Techniques in Next.js
42 How Pre-rendering helps with Performance
43 Static Site Generation (SSG) in Next.js
44 Incremental Static Regeneration (ISG) in Next.js
45 Serverside Rendering (SSR) in Next.js
46 Client Side Rendering (CSR) in Next.js
47 Project Component Architecture
48 Card Component Structure
49 Card Component Styling
50 Grid Layout For Card Component
51 Add Coffee Stores on Page
52 Next.js: next.config.js Use Unsplash Image
53 What to Pre-render in Coffee Connoisseur App
54 Default Pre-rendering in Next.js
55 Implement Static Site Generation (SSG)
56 Characteristics of Get Static Props in Next.js
57 Coffee Stores Heading
58 Get Static Paths in Next.js
59 Characteristics of Get Static Paths in Next.js
60 Implement Get Static Props and Get Static Paths in Next.js
61 Fallback in Next.js
62 Fallback: false with 404 Page
63 Fallback: true
64 Refactor Coffee Store Page
65 Coffee Store Page Styling
66 Coffee Store Page Styling (continued)
67 Setup Foursquare Account
68 Foursquare Places API Playground
69 Foursquare Places API
70 Explore Foursquare Places API
71 Foursquare API in Get Static Props
72 Fetch API Async Await
73 Coffee Stores Library
74 Environment Variables in Next.js
75 Update Foursquare API in Get Static Paths
76 Update Coffee Store Library Data
77 Setup Unsplash API
78 Invoke Unsplash API for Coffee Store Images
79 Update Coffee Store Library with Images
80 Display Coffee Store Images in the Card
81 Individual Coffee Store Page data
82 Update Styling for the App
83 Section Overview
84 Geolocation API Docs
85 Using React Hooks
86 Create React Hook for Retrieving User Location
87 Use the hook for Retrieving User Location
88 Client Side Rendering (CSR) Coffee Stores
89 Display Coffee Stores by Location on the Page
90 Refresh the Dynamic Route (Non-static)
91 Fallback in Next.js
92 Use React Context and Why to Use Context?
93 Create Store Context
94 Create Store Reducer in Context
95 Store Coffee Stores in Store Context
96 Coffee Store Page with Context
97 Refactor Coffee Store App
98 What are API’s?
99 What are Serverless Functions?
100 API routing with Next.js
101 Hello World API route
102 Catch All Routes in Next.js
103 Create a Serverless Function for Getting Coffee Stores
104 Invoke Serverless Function: Get Coffee Stores
105 Serverless Functions inside Get Static Props
106 Project Architecture
107 What is Airtable?
108 Setup Airtable
109 API Architecture: Coffee Store Page
110 Airtable Library
111 Basic Coffee Store API / Serverless function
112 API Design: Create Coffee Store
113 Find Coffee Store API
114 Transform Coffee Store Data
115 Airtable Docs: Create Coffee Store
116 Airtable Docs: Create Coffee Store (continued)
117 API Error Handling
118 Refactor Create Coffee Store API
119 API Architecture: Invoke API on Coffee Store Page
120 Invoke Coffee Store API once user navigates
121 Create Coffee Store for Statically Generated Route
122 SWR Design
123 Voting Feature Design
124 Coffee Store By Id API
125 Coffee Store By Id API Validation
126 Refactor Coffee Store By Id API
127 What is SWR? (State While Revalidate)
128 SWR Docs Fetch API
129 Use SWR on the Coffee Store Page
130 API Design: Favourite Coffee Store By Id API
131 Airtable Docs: Favourite Coffee Store By Id API
132 Implement Favourite Coffee Store By Id API with Airtable
133 Favourite Coffee Store By Id API
134 Favourite Coffee Store By Id API 2
135 Favourite Coffee Store By Id API 3
136 Favourite Coffee Store By Id API 4
137 Application Demo
138 Airtable Final Demo
139 Refactor and Cleanup
140 What is Deployment?
141 Running Your Application Next Build
142 Cloud Ready Application
143 Setting up Github Repository
144 Create a Github Repository and Push Your Code
145 Deployment to Vercel
146 Vercel Dashboard Walkthrough
147 Vercel Production Build Files
148 What is Netlify?
149 Netlify Deployment
150 Netlify Deployment Configuration Changes
151 Lighthouse Performance
152 Lighthouse Performance and SEO Report
153 Project Overview
154 Setting Up Our Master Project
155 Setup Fonts
156 Add Font to _Document
157 Global App Styling
158 Netflix Component Architecture
159 Banner Component
160 Banner Component Structure
161 Banner Component Button With Font
162 Icons with Google Fonts
163 NavBar Component Structure
164 NavBar Component Styling
165 NavBar Router
166 NavBar Dropdown
167 NavBar Logo Icons
168 Card Component Architecture
169 Card Component Structure
170 Card Component Size
171 Card Component Error Handling
172 Card Component Image Error
173 Framer Motion with Card
174 Implement Framer Motion with Card
175 Section Cards Architecture
176 Section Cards Structure
177 Section Cards Styling
178 Card Scaling Feature
179 Refactor Section Cards Component
180 Youtube API Overview
181 Which Youtube API To Use?
182 Implement Youtube Search API
183 Implement Youtube Search API (continued)
184 Data Fetching Technique: Server Side Rendering
185 Serverside Rendering (SSR) Rules in Next.js
186 Implement Serverside Rendering (SSR) to Fetch Videos
187 Youtube API: Google Console Project
188 Invoke Youtube API
189 Implement More Sections For Videos
190 Error Handling for Video Library
191 Popular Videos API Docs
192 Implement Popular Videos
193 Section Overview
194 What is Passwordless Authentication?
195 Overview of Sign-in Page
196 Setup of Sign-in Page
197 Sign-in Header Component
198 Sign-in Page Structure
199 Sign-in Page Styling
200 Sign-in Form Validation
201 Sign-in Routing To Dashboard
202 What is Magic Links?
203 Setup Magic Account
204 Install Magic in App
205 Magic API Keys
206 Magic SDK (continued)
207 Magic Docs For Login
208 Magic Implementation
209 Magic SDK Storage and Routing
210 Magic Loading State
211 Routing Delay with Login
212 Username on NavBar
213 SignOut a User
214 App Route once LoggedIn
215 Routing Flicker with Login
216 Loading Component
217 Project Architecture
218 What Are We Building and Video Id Page Route
219 Create Dynamic Route: Video Id Page
220 Link Dynamic Page to Card Component Routing
221 Connect Link Component
222 Connect Banner Component
223 React Modal Docs
224 Install React Modal Component
225 Modal Component Styles
226 Implement Youtube API Player & Docs
227 Youtube Player Styling
228 Modal Component Structure
229 Modal Styling
230 Which Data Fetching Techniques To Use?
231 What is Incremental Static Regeneration?
232 Incremental Static Regeneration Fallback
233 ISR (Incremental Static Regeneration) Demo and Next Steps
234 Incremental Static Regeneration (ISR) Docs
235 Implement Incremental Static Regeneration (ISR)
236 Incremental Static Regeneration with Youtube API Docs
237 Architectural Diagram
238 Youtube API by ID
239 Fix Link Component Route
240 ISR Query Params
241 Navbar Component
242 YouTube Quota Limit: Test Data
243 Section Overview
244 Why GraphQL?
245 What is GraphQL?
246 GraphQL Example
247 GQL Query vs Mutation
248 Introduction To React.js
249 Create React App
250 React App Folder Structure
251 React Fundamentals
252 React Fundamentals 2
253 Class vs Functional App.js
254 Hooks vs Classes
255 Your First React Component
256 Building A React App 1
257 Building A React App 2
258 Building A React App 3
259 Styling Your React App
260 Building A React App 4
261 Building A React App 5
262 Building A React App 6
263 Keeping Your Projects Up To Date
264 Solution: React 17
265 React Review
266 Error Boundary In React
267 Deploying Our React App
268 React Hooks
269 React Hooks 2
270 React Hooks 3
271 React Hooks 4
272 React Hooks 5
273 React Hooks 6
274 React Hooks 7
275 React Hooks 8
276 React Hooks 9