Next.js Course for Beginners 2024 | Build a Full Stack App
🚀FREE 2024 Next.js Visual CheatSheet plus Github code: https://bit.ly/nextjs-visual-cheatsheet
⭐️ Sign up for the Premium Next.js Course Waitlist: https://bit.ly/nextjscourse
⭐️ Website we're building: https://nextjs-crash-course-theta.ver...
#nextjs #react #javascript #tailwindcss #typescript
Ultimate Next.js Crash Course covers everything that you need to know to master Next.js and teach you how to build a full-stack, modern and production ready application. It covers technologies and we will learn things like complex database manipulations using Supabase, TypeScript, TypeScript Form Validations with Zod, React, different data fetching mechanisms such as Incremental Static Regeneration, Server-side rendering and Static site generation, Server Actions and Mutations, everything about Caching in Next.js alongside Gotchas, Build a SEO friendly site and more.
Discord for questions/help from others: / discord
⏰ Timeline
00:00 - 01:46 - What this Course Covers
01:47 - 05:12 - Next.js Workshop
05:13 - 05:27 - Download Next.js Visual CheatSheet
05:28 - 08:15 - Create your First Next.js App
08:16 - 10:17 - Walkthrough of the Codebase
10:18 - 14:22 - Routing in Next.js
14:23 - 17:44 - Intro to TailwindCSS
17:45 - 23:57 - App Architecture
23:58 - 26:32 - Next.js Link Component Deep Dive
26:33 - 30:14 - Server and Client Components
30:15 - 32:15 - Server and Client Components Examples
32:16 - 35:07 - When should Components be Client Components?
35:08 - 38:41 - Build Card Component
38:42 - 40:32 - Card Component Code Walkthrough
40:33 - 42:13 - Next.js Image Component Deep Dive
42:13 - 46:25 - Integrate Next.js Image Component inside Card
46:25 - 47:30 - Main Page Styling and Structure
47:31 - 52:46 - What is Supabase & Let’s set it up
52:46 - 53:21 - Row Level Policies in Supabase
53:21 - 57:42 - Caching Deep Dive in Next.js
57:42 - 58:20 - Data fetching Code Walkthrough
58:20 - 59:13 - Install Supabase in our Environment
59:13 - 01:02:42 - Data fetching with Supabase for Products
01:02:43 - 01:03:58 - Caching Principles in Next.js
01:03:59 - 01:05:45 - Incremental Static Regeneration in Next.js
01:05:46 - 01:06:52 - Supabase Top Products Query with Filters
01:06:53 - 01:09:22 - Special Files - Not Found Page in Next.js
01:09:23 - 01:11:03 - Integrate Link Component in Next.js
01:11:04 - 01:12:47 - Dynamic Routes in Next.js
01:12:48 - 01:14:22 - Routing Diagrams to Connect the Dots
01:14:23 - 01:16:25 - Let’s build the Product Page
01:16:26 - 01:21:17 - Pre-building Routes on demand in Next.js
01:21:18 - 01:22:14 - Server Actions and Mutations
01:22:15 - 01:24:17 - Let’s create a Server Action for Uploading Products
01:24:18 - 01:28:13 - Use TypeScript First Schema Validation Library Zod
01:28:14 - 01:30:29 - Handle Complex Form Errors in Next.js
01:30:30 - 01:34:16 - Insert Product Images in Supabase Database
01:34:17 - 01:36:20 - Insert Product Data in Supabase Database
01:36:21 - 01:38:04 - Supabase Policy for Storing Images
01:38:05 - 01:39:34 - Purging Cache in Server Actions
01:39:35 - 01:40:23 - Redirect User in Server Actions
01:40:24 - 01:42:58 - Show Loading State in Server Actions
01:42:59 - 01:44:45 - What is SEO? Why is it important?
01:44:46 - 01:46:03 - Characteristics of a High Ranked Site
01:46:04 - 01:47:20 - Pre-Rendering in Next.js
01:47:21 - 01:51:31 - Metadata API in Next.js
01:51:32 - 01:56:49 - Dynamic Metadata for SEO in Next.js
01:56:50 - 01:58:49 - Font Optimizations in Next.js
01:58:50 - 02:00:02 - Application Cleanup
02:00:03 - End of Course
🔗 RESOURCES:
💌 Frontend Newsletter:
Frontend Snacks 🍿 https://bit.ly/fesnacks
If you liked this video, you will also love my newsletter Frontend Snacks. You will learn a new topic each week with cool visuals and snippets, the latest frontend news and behind-the-scenes exclusive updates that I don't share anywhere else.
✨ FREE Goodies: https://kulkarniankita.com/goodies
☎️ Book a 1:1 coaching session with me
Opened a few coaching calls, grab them before they are gone: https://bit.ly/30mins-coaching-with-a...
🐤 Find me here
Twitter: / kulkarniankita9
LinkedIn: / kulkarniankita
Watch video Next.js Course for Beginners 2024 | Build a Full Stack App online without registration, duration hours minute second in high quality. This video was added by user Ankita Kulkarni 06 March 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 24,806 once and liked it 966 people.