Your First Full-Stack Next.js Project - Server Components, Server Actions, Suspense, Kinde

Your First Full-Stack Next.js Project - Server Components, Server Actions, Suspense, Kinde

ByteGrad via YouTube Direct link

00:00 Intro

1 of 42

1 of 42

00:00 Intro

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Your First Full-Stack Next.js Project - Server Components, Server Actions, Suspense, Kinde

Automatically move to the next video in the Classroom when playback concludes

  1. 1 00:00 Intro
  2. 2 02:59 Setup
  3. 3 04:31 Fresh Next.js app lookaround
  4. 4 08:57 Routing
  5. 5 10:25 Global styling with Tailwind CSS
  6. 6 12:58 Basic page content & styling
  7. 7 15:26 Header & Footer
  8. 8 18:37 Image component in Next.js
  9. 9 22:09 Nav with routes
  10. 10 23:22 Link component in Next.js
  11. 11 24:06 Finish header
  12. 12 25:30 Finish footer
  13. 13 27:40 Container
  14. 14 30:21 Metadata
  15. 15 31:12 Active nav link styling
  16. 16 32:11 Server components vs Client components
  17. 17 36:14 Data fetching
  18. 18 40:39 Next.js architecture overview
  19. 19 42:08 Dynamic routes post id
  20. 20 46:14 Params for data fetching
  21. 21 47:49 Suspense & Streaming loading.tsx
  22. 22 50:58 Suspense component more granular
  23. 23 54:31 Upvote Client component example
  24. 24 58:49 Next.js client-side features hooks, events, state
  25. 25 01:00:45 Create post page
  26. 26 01:04:36 Server action
  27. 27 01:13:37 Authentication to protect route Kinde
  28. 28 01:21:08 Middleware auth Kinde
  29. 29 01:23:14 Logout button
  30. 30 01:25:59 Finish create post page
  31. 31 01:30:04 Database & ORM in Next.js architecture
  32. 32 01:30:50 Prisma & SQLite setup
  33. 33 01:37:47 Add data to database
  34. 34 01:38:38 Getting data from database
  35. 35 01:41:10 Not found page
  36. 36 01:42:44 Caching & Revalidating revalidatePath
  37. 37 01:48:56 Auth for server actions Kinde
  38. 38 01:51:30 Static & Dynamic rendering
  39. 39 01:54:36 Deploy to Vercel pt. 1 Push to GitHub
  40. 40 01:56:15 Deploy to Vercel pt. 2
  41. 41 01:58:32 Vercel Postgres database
  42. 42 02:03:49 Kinde Auth for production

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.