Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай Complete Next.js Developer in 2023: Zero to Mastery, а также все другие курсы, прямо сейчас!
Премиум
  • Урок 1. 00:02:33
    Complete Next.js Developer: Zero to Mastery
  • Урок 2. 00:05:31
    Next.js Course Outline
  • Урок 3. 00:02:08
    Section Overview
  • Урок 4. 00:01:53
    What is Next.js?
  • Урок 5. 00:04:39
    Benefits of Next.js and Different Rendering Techniques
  • Урок 6. 00:06:27
    Performance with Next.js
  • Урок 7. 00:04:14
    Image Component in Next.js
  • Урок 8. 00:06:12
    File Based Routing and SEO
  • Урок 9. 00:04:36
    Serverless Functions in Next.js
  • Урок 10. 00:06:12
    Next.js vs Create React App
  • Урок 11. 00:02:00
    Project overview: What are we building?
  • Урок 12. 00:07:18
    Create a Next.js app: Zero Config
  • Урок 13. 00:11:58
    How To Upgrade Your Next.js Version
  • Урок 14. 00:03:40
    Upgrade to Next.js 12
  • Урок 15. 00:06:02
    Next.js Version Breaking Changes
  • Урок 16. 00:13:39
    Features of Next.js 12
  • Урок 17. 00:08:25
    Next.js setup project walkthrough
  • Урок 18. 00:04:13
    _app.js Solution with Footer
  • Урок 19. 00:03:33
    What is Fast Refresh?
  • Урок 20. 00:07:49
    What are CSS modules?
  • Урок 21. 00:01:37
    Let's get ready for Home Page
  • Урок 22. 00:05:11
    App background
  • Урок 23. 00:06:45
    Banner Component
  • Урок 24. 00:07:07
    Mobile First Development & Banner Component Styling
  • Урок 25. 00:02:48
    Next.js Head Component
  • Урок 26. 00:04:36
    Routing in Next.js
  • Урок 27. 00:04:05
    Add routing for Coffee Store Page
  • Урок 28. 00:07:24
    What is Dynamic Routing?
  • Урок 29. 00:08:26
    Add route using Link component
  • Урок 30. 00:01:47
    Add routes to Dynamic Pages with Link Component
  • Урок 31. 00:07:32
    Solution: Routing
  • Урок 32. 00:05:03
    Style our homepage
  • Урок 33. 00:03:00
    Hero Image Generator
  • Урок 34. 00:00:51
    Add Hero Component
  • Урок 35. 00:04:20
    Next.js Image component
  • Урок 36. 00:02:34
    Hero Image on Home Page
  • Урок 37. 00:01:53
    Setup fonts in Next.js
  • Урок 38. 00:03:01
    Load fonts on the page
  • Урок 39. 00:06:45
    Document in Next.js
  • Урок 40. 00:05:58
    Apply fonts in Document
  • Урок 41. 00:07:49
    What is SEO?
  • Урок 42. 00:05:44
    Pre-rendering in Next.js
  • Урок 43. 00:04:18
    Plain React vs Next.js app
  • Урок 44. 00:02:10
    Different Rendering Techniques in Next.js
  • Урок 45. 00:04:42
    How Pre-rendering helps with Performance
  • Урок 46. 00:05:17
    Static Site Generation (SSG) in Next.js
  • Урок 47. 00:06:31
    Incremental Static Regeneration (ISG) in Next.js
  • Урок 48. 00:04:39
    Serverside Rendering (SSR) in Next.js
  • Урок 49. 00:03:40
    Client Side Rendering (CSR) in Next.js
  • Урок 50. 00:02:55
    Project Component Architecture
  • Урок 51. 00:06:03
    Card Component Structure
  • Урок 52. 00:07:29
    Card Component Styling
  • Урок 53. 00:06:06
    Grid Layout For Card Component
  • Урок 54. 00:04:44
    Add Coffee Stores on Page
  • Урок 55. 00:04:29
    Next.js: next.config.js Use Unsplash Image
  • Урок 56. 00:02:56
    What to Pre-render in Coffee Connoisseur App
  • Урок 57. 00:01:46
    Default Pre-rendering in Next.js
  • Урок 58. 00:06:58
    Implement Static Site Generation (SSG)
  • Урок 59. 00:06:46
    Characteristics of Get Static Props in Next.js
  • Урок 60. 00:07:01
    Coffee Stores Heading
  • Урок 61. 00:03:58
    Get Static Paths in Next.js
  • Урок 62. 00:02:15
    Characteristics of Get Static Paths in Next.js
  • Урок 63. 00:07:59
    Implement Get Static Props and Get Static Paths in Next.js
  • Урок 64. 00:09:24
    Fallback in Next.js
  • Урок 65. 00:02:06
    Fallback: false with 404 Page
  • Урок 66. 00:09:42
    Fallback: true
  • Урок 67. 00:05:30
    Refactor Coffee Store Page
  • Урок 68. 00:07:37
    Coffee Store Page Styling
  • Урок 69. 00:09:37
    Coffee Store Page Styling (continued)
  • Урок 70. 00:06:02
    Setup Foursquare Account
  • Урок 71. 00:03:56
    Foursquare Places API
  • Урок 72. 00:02:26
    Rate Limiting
  • Урок 73. 00:03:26
    Foursquare Places API Playground
  • Урок 74. 00:02:07
    Foursquare API in Get Static Props
  • Урок 75. 00:07:34
    Fetch API Async Await
  • Урок 76. 00:04:00
    Env Local vs Env Next.config.js
  • Урок 77. 00:02:12
    Environment Variables in Next.js
  • Урок 78. 00:05:41
    Coffee Stores Library
  • Урок 79. 00:04:20
    Update Foursquare API in Get Static Paths
  • Урок 80. 00:03:32
    Update Coffee Store Library Data
  • Урок 81. 00:06:47
    Setup Unsplash API
  • Урок 82. 00:03:20
    Invoke Unsplash API for Coffee Store Images - Part 1
  • Урок 83. 00:02:34
    Invoke Unsplash API for Coffee Store Images - Part 2
  • Урок 84. 00:02:38
    Update Coffee Store Library with Images
  • Урок 85. 00:05:53
    Display Coffee Store Images in the Card
  • Урок 86. 00:05:33
    Individual Coffee Store Page data
  • Урок 87. 00:01:58
    Update Styling for the App
  • Урок 88. 00:01:29
    Section Overview
  • Урок 89. 00:04:33
    Geolocation API Docs
  • Урок 90. 00:01:19
    Using React Hooks
  • Урок 91. 00:06:20
    Create React Hook for Retrieving User Location
  • Урок 92. 00:10:20
    Use the hook for Retrieving User Location
  • Урок 93. 00:09:25
    Client Side Rendering (CSR) Coffee Stores
  • Урок 94. 00:04:56
    Display Coffee Stores by Location on the Page
  • Урок 95. 00:04:03
    Refresh the Dynamic Route (Non-static)
  • Урок 96. 00:03:40
    Fallback in Next.js
  • Урок 97. 00:04:10
    Use React Context and Why to Use Context?
  • Урок 98. 00:05:18
    Create Store Context
  • Урок 99. 00:07:54
    Create Store Reducer in Context
  • Урок 100. 00:08:52
    Store Coffee Stores in Store Context
  • Урок 101. 00:03:32
    Coffee Store Page with Context
  • Урок 102. 00:06:36
    Coffee Store Page for Non-SSG Routes
  • Урок 103. 00:04:31
    Refactor Coffee Store App
  • Урок 104. 00:07:50
    What are API's?
  • Урок 105. 00:06:25
    What are Serverless Functions?
  • Урок 106. 00:02:29
    API routing with Next.js
  • Урок 107. 00:04:40
    Hello World API route
  • Урок 108. 00:05:33
    Catch All Routes in Next.js
  • Урок 109. 00:08:40
    Create a Serverless Function for Getting Coffee Stores
  • Урок 110. 00:05:38
    Invoke Serverless Function: Get Coffee Stores
  • Урок 111. 00:03:17
    Serverless Functions inside Get Static Props
  • Урок 112. 00:07:26
    Project Architecture
  • Урок 113. 00:04:26
    What is Airtable?
  • Урок 114. 00:08:22
    Setup Airtable
  • Урок 115. 00:05:42
    API Architecture: Coffee Store Page
  • Урок 116. 00:07:09
    Airtable Library
  • Урок 117. 00:06:51
    Basic Coffee Store API / Serverless function
  • Урок 118. 00:07:22
    API Design: Create Coffee Store
  • Урок 119. 00:05:29
    Find Coffee Store API
  • Урок 120. 00:05:14
    Transform Coffee Store Data
  • Урок 121. 00:09:06
    Airtable Docs: Create Coffee Store
  • Урок 122. 00:05:04
    Airtable Docs: Create Coffee Store (continued)
  • Урок 123. 00:06:00
    API Error Handling
  • Урок 124. 00:09:15
    Refactor Create Coffee Store API
  • Урок 125. 00:04:30
    API Architecture: Invoke API on Coffee Store Page
  • Урок 126. 00:09:57
    Invoke Coffee Store API once user navigates
  • Урок 127. 00:05:34
    Create Coffee Store for Statically Generated Route
  • Урок 128. 00:02:56
    Exercise: Imposter Syndrome
  • Урок 129. 00:03:34
    SWR Design
  • Урок 130. 00:04:10
    Voting Feature Design
  • Урок 131. 00:07:16
    Coffee Store By Id API
  • Урок 132. 00:06:00
    Coffee Store By Id API Validation
  • Урок 133. 00:08:58
    Refactor Coffee Store By Id API
  • Урок 134. 00:07:03
    What is SWR? (State While Revalidate)
  • Урок 135. 00:00:52
    SWR Docs Fetch API
  • Урок 136. 00:08:59
    Use SWR on the Coffee Store Page
  • Урок 137. 00:06:15
    API Design: Favourite Coffee Store By Id API
  • Урок 138. 00:06:51
    Airtable Docs: Favourite Coffee Store By Id API
  • Урок 139. 00:09:30
    Favourite Coffee Store By Id API
  • Урок 140. 00:07:52
    Favourite Coffee Store By Id API (continued)
  • Урок 141. 00:08:17
    Favourite Coffee Store By Id API wrap
  • Урок 142. 00:05:20
    Invoke Favourite Coffee Store By Id API
  • Урок 143. 00:05:45
    Application Demo
  • Урок 144. 00:03:06
    Airtable Final Demo
  • Урок 145. 00:04:20
    Refactor and Cleanup
  • Урок 146. 00:04:50
    What is Deployment?
  • Урок 147. 00:08:56
    Running Your Application Next Build
  • Урок 148. 00:05:43
    Cloud Ready Application
  • Урок 149. 00:01:15
    Setting up Github Repository
  • Урок 150. 00:06:07
    Create a Github Repository and Push Your Code
  • Урок 151. 00:10:20
    Deployment to Vercel
  • Урок 152. 00:02:45
    Vercel Dashboard Walkthrough
  • Урок 153. 00:05:00
    Vercel Production Build Files
  • Урок 154. 00:06:01
    What is Netlify?
  • Урок 155. 00:10:38
    Netlify Deployment
  • Урок 156. 00:09:34
    Netlify Deployment Configuration Changes
  • Урок 157. 00:04:32
    Lighthouse Performance
  • Урок 158. 00:09:17
    Lighthouse Performance and SEO Report
  • Урок 159. 00:05:55
    Project Overview
  • Урок 160. 00:03:08
    Setting Up Our Master Project
  • Урок 161. 00:03:49
    Setup Fonts
  • Урок 162. 00:05:03
    Add Font to _Document
  • Урок 163. 00:07:57
    Global App Styling
  • Урок 164. 00:04:28
    Netflix Component Architecture
  • Урок 165. 00:03:50
    Banner Component
  • Урок 166. 00:09:36
    Banner Component Structure
  • Урок 167. 00:08:26
    Banner Component Button With Font
  • Урок 168. 00:04:03
    Icons with Google Fonts
  • Урок 169. 00:07:28
    NavBar Component Structure
  • Урок 170. 00:08:55
    NavBar Component Styling
  • Урок 171. 00:08:55
    NavBar Router
  • Урок 172. 00:04:57
    NavBar Dropdown
  • Урок 173. 00:07:03
    NavBar Logo Icons
  • Урок 174. 00:02:20
    Card Component Architecture
  • Урок 175. 00:06:10
    Card Component Structure
  • Урок 176. 00:08:35
    Card Component Size
  • Урок 177. 00:09:33
    Card Component Error Handling
  • Урок 178. 00:04:01
    Card Component Image Error
  • Урок 179. 00:04:16
    Framer Motion with Card
  • Урок 180. 00:08:36
    Implement Framer Motion with Card
  • Урок 181. 00:01:18
    Section Cards Architecture
  • Урок 182. 00:06:44
    Section Cards Structure
  • Урок 183. 00:05:16
    Section Cards Styling
  • Урок 184. 00:08:14
    Card Scaling Feature
  • Урок 185. 00:08:05
    Refactor Section Cards Component
  • Урок 186. 00:02:26
    Youtube API Overview
  • Урок 187. 00:06:36
    Which Youtube API To Use?
  • Урок 188. 00:06:27
    Implement Youtube Search API
  • Урок 189. 00:05:00
    Implement Youtube Search API (continued)
  • Урок 190. 00:06:18
    Data Fetching Technique: Server Side Rendering
  • Урок 191. 00:02:49
    Serverside Rendering (SSR) Rules in Next.js
  • Урок 192. 00:06:35
    Implement Serverside Rendering (SSR) to Fetch Videos
  • Урок 193. 00:07:05
    Youtube API: Google Console Project
  • Урок 194. 00:07:31
    Invoke Youtube API
  • Урок 195. 00:05:45
    Implement More Sections For Videos
  • Урок 196. 00:06:30
    Error Handling for Video Library
  • Урок 197. 00:08:47
    Popular Videos API Docs
  • Урок 198. 00:06:18
    Implement Popular Videos
  • Урок 199. 00:02:29
    Section Overview
  • Урок 200. 00:04:59
    What is Passwordless Authentication?
  • Урок 201. 00:03:44
    Overview of Sign-in Page
  • Урок 202. 00:05:40
    Setup of Sign-in Page
  • Урок 203. 00:03:56
    Sign-in Header Component
  • Урок 204. 00:05:59
    Sign-in Page Structure
  • Урок 205. 00:07:14
    Sign-in Page Styling
  • Урок 206. 00:09:24
    Sign-in Form Validation
  • Урок 207. 00:07:19
    Sign-in Routing To Dashboard
  • Урок 208. 00:08:58
    What is Magic Links?
  • Урок 209. 00:06:56
    Setup Magic Account
  • Урок 210. 00:03:46
    Install Magic in App
  • Урок 211. 00:06:36
    Magic API Keys
  • Урок 212. 00:02:58
    Magic SDK (continued)
  • Урок 213. 00:04:34
    Magic Docs For Login
  • Урок 214. 00:08:13
    Magic Implementation
  • Урок 215. 00:04:31
    Magic SDK Storage and Routing
  • Урок 216. 00:05:59
    Magic Loading State
  • Урок 217. 00:06:54
    Routing Delay with Login
  • Урок 218. 00:09:18
    Username on NavBar
  • Урок 219. 00:08:46
    SignOut a User
  • Урок 220. 00:07:13
    App Route once LoggedIn
  • Урок 221. 00:06:15
    Routing Flicker with Login
  • Урок 222. 00:04:23
    Loading Component
  • Урок 223. 00:03:51
    Project Architecture
  • Урок 224. 00:04:26
    What Are We Building and Video Id Page Route
  • Урок 225. 00:03:38
    Create Dynamic Route: Video Id Page
  • Урок 226. 00:04:26
    Link Dynamic Page to Card Component Routing
  • Урок 227. 00:02:54
    Connect Link Component
  • Урок 228. 00:03:56
    Connect Banner Component
  • Урок 229. 00:02:57
    React Modal Docs
  • Урок 230. 00:08:34
    Install React Modal Component
  • Урок 231. 00:01:45
    Modal Component Styles
  • Урок 232. 00:08:33
    Implement Youtube API Player & Docs
  • Урок 233. 00:04:18
    Youtube Player Styling
  • Урок 234. 00:09:22
    Modal Component Structure
  • Урок 235. 00:03:14
    Modal Styling
  • Урок 236. 00:07:44
    Which Data Fetching Techniques To Use?
  • Урок 237. 00:07:06
    What is Incremental Static Regeneration?
  • Урок 238. 00:04:28
    Incremental Static Regeneration Fallback
  • Урок 239. 00:03:19
    ISR (Incremental Static Regeneration) Demo and Next Steps
  • Урок 240. 00:04:50
    Incremental Static Regeneration (ISR) Docs
  • Урок 241. 00:07:26
    Implement Incremental Static Regeneration (ISR)
  • Урок 242. 00:05:20
    Incremental Static Regeneration with Youtube API Docs
  • Урок 243. 00:01:17
    Architectural Diagram
  • Урок 244. 00:10:25
    Youtube API by ID
  • Урок 245. 00:02:25
    Fix Link Component Route
  • Урок 246. 00:05:42
    ISR Query Params
  • Урок 247. 00:04:40
    Navbar Component
  • Урок 248. 00:08:51
    YouTube Quota Limit: Test Data
  • Урок 249. 00:04:16
    Section Overview
  • Урок 250. 00:07:34
    Why GraphQL?
  • Урок 251. 00:06:54
    What is GraphQL?
  • Урок 252. 00:04:58
    GraphQL Example
  • Урок 253. 00:05:46
    GQL Query vs Mutation
  • Урок 254. 00:05:50
    What is Hasura?
  • Урок 255. 00:07:33
    Hasura API Explorer
  • Урок 256. 00:05:55
    Hasura Dashboard and Signup
  • Урок 257. 00:05:28
    Hasura Create PostGres DB
  • Урок 258. 00:07:23
    Hasura DB Architecture
  • Урок 259. 00:06:24
    Hasura DB Architecture (continued)
  • Урок 260. 00:06:38
    Setup DB
  • Урок 261. 00:05:10
    Hasura Try Out Tables
  • Урок 262. 00:06:41
    Query Live Hasura Server
  • Урок 263. 00:05:46
    Query Live Hasura Server with Environment Variables
  • Урок 264. 00:07:36
    Hasura User Roles
  • Урок 265. 00:05:18
    User Roles: Why JWT (JSON Web Tokens)
  • Урок 266. 00:06:53
    What is JWT (JSON Web Token)
  • Урок 267. 00:06:40
    JWT (JSON Web Token) Secret
  • Урок 268. 00:07:25
    Create JWT Secret and Update Roles
  • Урок 269. 00:02:29
    Section Overview
  • Урок 270. 00:05:33
    Authentication Architecture
  • Урок 271. 00:05:19
    Login API
  • Урок 272. 00:06:08
    Login API Architecture
  • Урок 273. 00:05:03
    Login API Create Auth Header
  • Урок 274. 00:06:25
    Login API Magic Server Side SDK
  • Урок 275. 00:05:48
    Login API Magic Server Side SDK Testing
  • Урок 276. 00:04:38
    Login API JWT (JSON Web Token) Docs
  • Урок 277. 00:08:15
    Login API Create JWT (JSON Web Token)
  • Урок 278. 00:05:39
    Login API Hasura Check New User
  • Урок 279. 00:09:37
    Login API Check New User Query
  • Урок 280. 00:07:24
    Login API Refactor
  • Урок 281. 00:04:08
    Login API New User Hasura Dashboard
  • Урок 282. 00:10:32
    Login API Create New User Mutation
  • Урок 283. 00:05:28
    Login API Overview and Cookie
  • Урок 284. 00:08:03
    Login API Set Token Cookie
  • Урок 285. 00:04:03
    Login API Set Token Cookie Testing
  • Урок 286. 00:02:14
    Login API Cleanup
  • Урок 287. 00:09:16
    Invoke Login API on Login
  • Урок 288. 00:01:54
    Section Overview
  • Урок 289. 00:05:21
    App Architecture
  • Урок 290. 00:09:37
    Like and Dislike Button Functionality
  • Урок 291. 00:02:05
    Like and Dislike Button Styling
  • Урок 292. 00:08:47
    Like and Dislike Button States
  • Урок 293. 00:04:36
    Stats Rating API Architecture
  • Урок 294. 00:03:56
    Stats API Creation
  • Урок 295. 00:09:26
    Build Stats with Request Cookies
  • Урок 296. 00:04:01
    Stats API Overview with JWT Verification
  • Урок 297. 00:03:11
    Stats API JWT Verification
  • Урок 298. 00:04:21
    Stats API Design GraphQL
  • Урок 299. 00:03:43
    Stats API Design Find User By ID
  • Урок 300. 00:09:35
    Find User By Id GraphQL
  • Урок 301. 00:03:16
    Use Query String For Video ID
  • Урок 302. 00:03:37
    Conditional Logic Does Video Exist?
  • Урок 303. 00:08:24
    GraphiQL: Insert and Update Mutation
  • Урок 304. 00:10:48
    Stats API Use Insert and Update Mutation
  • Урок 305. 00:04:40
    Stats API Testing
  • Урок 306. 00:07:09
    Insert And Update Mutation Implementation
  • Урок 307. 00:09:15
    Stats API Wrap
  • Урок 308. 00:01:10
    Overview of Like Dislike Functionality
  • Урок 309. 00:10:08
    Like Dislike Functionality
  • Урок 310. 00:03:26
    Like Dislike Functionality Testing
  • Урок 311. 00:03:27
    Stats API Design: GET Request
  • Урок 312. 00:05:05
    Tweak Stats API GET Request
  • Урок 313. 00:06:18
    Stats API Refactor
  • Урок 314. 00:09:15
    Invoke Stats API on Frontend
  • Урок 315. 00:04:47
    Watch It Again Architecture
  • Урок 316. 00:06:50
    Watch it Again Query Hasura
  • Урок 317. 00:06:10
    Watch it Again Call in SSR (ServerSide Rendering)
  • Урок 318. 00:06:47
    Render Watch it Again Section on Page
  • Урок 319. 00:05:15
    High Resolution Images in the App
  • Урок 320. 00:05:35
    Cookies inside SSR (ServerSide Rendering)
  • Урок 321. 00:09:24
    Redirects in SSR (ServerSide Rendering)
  • Урок 322. 00:04:24
    Create Redirect User Hook
  • Урок 323. 00:05:36
    Testing the Redirect User Hook
  • Урок 324. 00:02:40
    My List Page Architecture
  • Урок 325. 00:06:12
    Build My List Page
  • Урок 326. 00:02:40
    Styling My List Page
  • Урок 327. 00:04:57
    Hasura Query for My List Page
  • Урок 328. 00:07:13
    Server Side Render My List Page
  • Урок 329. 00:08:47
    Wrap Cards in My List Page
  • Урок 330. 00:06:01
    Logout Assignment
  • Урок 331. 00:06:18
    NextJS 12: Middleware Introduction
  • Урок 332. 00:06:09
    NextJS 12: Middleware Lets Try it Out
  • Урок 333. 00:09:18
    NextJS 12: Middleware Implementation Continued
  • Урок 334. 00:05:49
    How To Make Cloud Ready App
  • Урок 335. 00:06:56
    Create Github Repo
  • Урок 336. 00:03:26
    Application Cleanup
  • Урок 337. 00:07:35
    Deployment To Vercel
  • Урок 338. 00:08:08
    Try The App On Vercel
  • Урок 339. 00:03:38
    Application Testing on Vercel
  • Урок 340. 00:06:38
    Run Production Next Build
  • Урок 341. 00:01:18
    Thank You!