The Ultimate Next.js 14+ Crash course Master Web Development

Course Curriculum

Chapter 1: Course trailer

Lecture 1: Trailer

Chapter 2: Introduction

Lecture 1: Introduction Overview

Lecture 2: What is Next js ?

Lecture 3: Apps built with Next js

Chapter 3: Getting started

Lecture 1: Create Next js project (Automatic installation)

Lecture 2: Create Next js project (Manuall Installation)

Lecture 3: Next.js Project Structure

Chapter 4: Routing

Lecture 1: Routing fundamentals, defining routes, nested routes

Lecture 2: Layouts

Lecture 3: Link component

Lecture 4: Templates

Lecture 5: Metadata

Lecture 6: usePathname

Lecture 7: navigation scroll behavior and scroll to id

Lecture 8: useRouter() Hook and history api

Lecture 9: useSearchParams

Lecture 10: Route Groups and layout groupes

Lecture 11: Creating multiple root layouts

Chapter 5: Styling

Lecture 1: Global css

Lecture 2: Css modules

Lecture 3: Sass

Lecture 4: Css in js styles without framework

Lecture 5: Tailwind css

Lecture 6: Chadcn ui

Chapter 6: Typescript and next js

Lecture 1: why using typescript

Lecture 2: Re-creating our project with typescript

Lecture 3: Create a next js component with typescript and props interface

Chapter 7: Routing – Advanced

Lecture 1: Dynamic routes fundamentals

Lecture 2: Dynamic routes – real world example

Lecture 3: Generating Static Params

Lecture 4: Catch-all Segments and Optional Catch-all Segments

Lecture 5: Loading ui (with fetch example)

Lecture 6: Streaming – theory

Lecture 7: Error handling – (error.js)

Chapter 8: Font, Image, Script Optimizations

Lecture 1: Use google fonts in your next js 14+ application

Lecture 2: Use google font as variables with tailwind css

Lecture 3: Script optimization

Lecture 4: Image optimization – part 1

Chapter 9: Rendering

Lecture 1: Client components

Lecture 2: Server Components : Fundamentals and benefits

Lecture 3: How are Server Components rendered?

Lecture 4: Dynamic Rendering

Lecture 5: Dynamic Functions

Lecture 6: When to use Server and Client Components?

Lecture 7: Static Rendering (Default)

Lecture 8: Edge and Node.js Runtimes

Chapter 10: Data Fetching, Caching, and Revalidating

Lecture 1: Fetching Data on the Server with fetch, cache , time-based revalidation

Lecture 2: Fetching data on the client with axios

Chapter 11: Parallel routes

Lecture 1: Parallel routing Fundemntals

Lecture 2: Independent loading test for parallel routes

Chapter 12: Intercepting Routes, building an app with advanced parallel, intercepting routes

Lecture 1: Understanding the concept of Intercepting Routes

Lecture 2: Building our app #1 : home page

Lecture 3: Building our app #2 : Photo page

Lecture 4: Building our app # 3 parallel route modal and intercepting photo route

Lecture 5: Building our app #4 click outside dismiss and key event listener

Chapter 13: Route handlers, cookies, headers

Lecture 1: Route handlers fundamentals, request, response, fetch, caching

Lecture 2: Simple quote generator app with route handlers

Lecture 3: Cookies

Lecture 4: Headers

Lecture 5: Redirects

Lecture 6: Dynamic Route Segments

Lecture 7: URL Query Parameters

Lecture 8: Request Body and using thunder client to test our route handler

Lecture 9: Sending FormData from next js client and retrieve it in route handler

Lecture 10: Create open ai chat with route handlers and streaming

Lecture 11: CORS

Lecture 12: Non-UI Responses

Chapter 14: Middleware, NextRequest and NextResponse apis

Lecture 1: Middleware fundamentals with example

Lecture 2: Matcher

Lecture 3: Conditional Statements

Lecture 4: Rewrite vs Redirect

Lecture 5: Using Cookies

Lecture 6: Setting Headers

Lecture 7: Producing a Response

Chapter 15: Internationalization – application with multiple languages made easy

Lecture 1: App setup with i18n config and dictionaries