Master Next.js 14 – Full-Stack Complete Guide

Course Curriculum

Chapter 1: Getting Started: Begin Here!

Lecture 1: Why React is Not Enough for Full-Stack Web Development?

Lecture 2: How is Next.js Full-Stack and How Does it Fill the Gaps

Lecture 3: Hear Me Out: Server Actions are Great

Chapter 2: Getting Started: Creating a Next.js Project and Overview

Lecture 1: Creating a Next.js Project

Lecture 2: Next.js Project Structure

Chapter 3: React 101 (Watch if You Are New to React!)

Lecture 1: Section Introduction: React 101

Lecture 2: What is React?

Lecture 3: Understanding JSX Syntax

Lecture 4: Components as the Basic UI Building Blocks

Lecture 5: Component Props (Passing Data to Components)

Lecture 6: Responding to Events

Lecture 7: Keeping Component State using Hooks (useState)

Lecture 8: Conditional Rendering

Lecture 9: Rendering List of Elements

Lecture 10: Importing and Exporting Components

Chapter 4: Next.js 101: Routing, Pages & Layouts

Lecture 1: Section Introduction: Routing, Pages & Layouts

Lecture 2: File-system Routing & Creating Pages

Lecture 3: Layouts (UI Shared Between Pages)

Lecture 4: Links and Navigation

Lecture 5: Understand Prefetching and Caching

Lecture 6: Dynamic Routes with Parameters

Chapter 5: Next.js 101: Data Fetching (and Caching!)

Lecture 1: Section Introduction: Data Fetching (and Caching!)

Lecture 2: How Data Fetching Works in Next.js (Explanation and Recommendations)

Lecture 3: Running a Mock JSON Server

Lecture 4: Actually Fetching Data with fetch inside a Server Component

Lecture 5: Understanding Data Cache and Request Memoization

Lecture 6: Fetch Cache in Practice

Chapter 6: Next.js 101: Dealing with Slow Data Sources (Suspense, Loading UI & Streaming)

Lecture 1: Section Introduction: Dealing with Slow Data Sources

Lecture 2: How a Slow Data Source Can Block Your Whole Page!

Lecture 3: Loading UI and Streaming

Lecture 4: Loading UI and React Suspense

Lecture 5: When to Use React Suspense? When Loading UI? Differences?

Lecture 6: About Streaming and SSR

Chapter 7: Next.js 101: Styling With Tailwind and CSS Modules

Lecture 1: Section Introduction: Styling With Tailwind and CSS Modules

Lecture 2: Styling Options in Next.js

Lecture 3: Getting Started with Tailwind CSS

Lecture 4: Flex Container & Responsive Design

Lecture 5: Adding a CSS Module and Using Tailwind Inside

Lecture 6: Positioning Elements with Flex

Lecture 7: Using Grid and Making Customizable Components

Chapter 8: Next.js 101: Error Management in Next

Lecture 1: Section Introduction: Error Management in Next

Lecture 2: Error Handling on Pages

Lecture 3: Error Boundaries

Lecture 4: Error Hierarchy – Where Does the Error Get Catched?

Lecture 5: Nested Layouts

Lecture 6: Error Handling in Layouts and in the Root Layout

Lecture 7: Recovering from the Errors

Lecture 8: Custom Not Found (404) Page

Chapter 9: Next.js 101: Images and Image Optimizations

Lecture 1: Section Introduction: Images and Image Optimizations

Lecture 2: Problems with Images

Lecture 3: Core Web Vitals, LCP, CLS and Optimizing Images

Lecture 4: Adding Image Gallery (Not Optimized Yet!)

Lecture 5: Using the Next <Image> Component for Automatic Optimization

Lecture 6: Responsive Image Size

Lecture 7: Placeholders & Image Quality

Lecture 8: Measuring the Page with Lighthouse

Chapter 10: Next.js 101: Fonts, Dynamic OpenGraph Images, Assets & Metadata (SEO)

Lecture 1: Section Introduction: Fonts, OpenGraph, Scrips, Metadata

Lecture 2: Optimizing Fonts with Next.js (Google and Local Fonts!)

Lecture 3: Optimizing Scripts (Connecting with External Services like Analytics, Chatbots)

Lecture 4: Introduction to Metadata

Lecture 5: An Overview of Metadata Attributes

Lecture 6: Static Metadata

Lecture 7: Dynamic Metadata

Lecture 8: Dynamic (OpenGraph) Image Generation

Chapter 11: Blog Project: Markdown and MDX

Lecture 1: Section Introduction: Markdown and MDX

Lecture 2: Setting Up Markdown and MDX and First MDX Page!

Lecture 3: Styling MDX – Tailwind Typography

Lecture 4: MDX Remote (Rendering any Markdown)

Lecture 5: Loading MDX From Files (Blog Posts)

Chapter 12: Blog Project: Metadata, Frontmatter, Post List

Lecture 1: Section Introduction: Blog Project: Metadata, Frontmatter, Post List

Lecture 2: Metadata #1 – What's Frontmatter and Refactor Time #1

Lecture 3: Metadata #2 – Extracting Frontmatter and Content, Refactor Time #2

Lecture 4: Blog Post List – Fetching Metadata of All Files

Lecture 5: Blog Post List – Links

Chapter 13: Blog Project: Caching, Filtering, Sorting, Pagination

Lecture 1: Section Introduction: Caching, Filtering, Sorting, Pagination

Lecture 2: Performance Improvements and Refactoring – Using cache for Memoization

Lecture 3: Tags and Filtering Using Search Query Params

Lecture 4: Sorting Posts – Using Query Params for State #1

Lecture 5: Change Sort Order – Using Query Params for State #2

Lecture 6: Adding Pagination – Using Query Params for State #3

Lecture 7: Pagination Component – Pages #1

Lecture 8: Pagination Component – Links #2

Chapter 14: Blog Project: Custom HTML, Tags, Dark Mode, Cookies

Lecture 1: Section Introduction: Custom HTML, Tags, Dark Mode, Cookies

Lecture 2: Customizing HTML Generated from Markdown

Lecture 3: Tags on Blog Post

Lecture 4: Dark Mode Toggling – Component #1