Next.js 14 Complete Course 2024 - Full Stack App Tutorial for Beginners

Overview

Embark on a comprehensive 5-hour journey through Next.js 14, covering everything from installation to advanced features. Learn to build a full-stack application using the app router, server actions, MongoDB, and Auth.js. Master key concepts including folder structure, routing, layouts, components, styling with CSS modules and Tailwind, responsive design, and image optimization. Dive deep into server and client components, data fetching, caching, and SEO optimization. Explore authentication implementation, including social media sign-in and user credentials. Tackle common issues like hydration errors and route protection. Culminate your learning by creating an admin dashboard with server actions. Access provided source code repositories to follow along and reinforce your understanding of Next.js 14 development.

Syllabus

Introduction
Next.js Installation
Next.js 14 Folder Structure
Next.js App Route Explained Next.js Routing
Next.js Layouts Explained
Next.js Should You Use the src Directory?
Next.js Components
Next.js Loading, Error, Not Found Layouts
Next.js Styling CSS Modules and Tailwind
Next.js How to Give the Active Class to a Navbar Link
Responsive Navbar Design
Responsive Container Layout
Next.js Image Explained
Homepage Design
About Page Design
Contact Page Design
Next.js Blog Page Design
Single Blog Page Design
Next.js Rendering Explained Server Components vs Client Components
Next.js 14 Hydration Error and the Solutions
Next.js Client Component Parent & Server Component Child Problem
Next.js Navigation Explained Links, useRouter, useParams, page params
Next.js Data Fetching Explained Understanding Caching
Next.js Suspense Explained
Next.js 14 How to Fetch Data without Using an API
Next.js 14 MongoDB Full Stack App Tutorial
Next.js 14 noStore Explained How to Stop Caching Data?
Next.js SEO Tutorial Static and Dynamic SEO Explained
Next.js 14 Server Actions Tutorial with a Real-World Example
Next.js Server Actions vs API Routes Which One to Choose?
Next.js 14 API Route Explained
Next.js 14 Auth Tutorial | Authentication with Next-Auth & Server Actions
Next Auth Social Media Sign in Tutorial with Server Actions
Next Auth Social Media Sign in How to Add User To Database
Next Auth with User Credentials Tutorial Email & Password Login
Next.js useFormState Hook Explained!
Next.js 14 NEXT_REDIRECT Error and the Solution
Next.js 14 Middleware Explained | Next.js Auth.js Next-Auth How to Protect Routes?
Next.js 14 Admin Dashboard Tutorial with Server Actions
Outro