Next.JS : The beginner guide (2024 edition)

Course Curriculum

Chapter 1: Introduction

Lecture 1: Requirement

Lecture 2: Next.JS

Lecture 3: A quick refresher about client/server

Lecture 4: Client side rendering

Lecture 5: Server side rendering

Chapter 2: Front end project – Flash news project

Lecture 1: Preview

Lecture 2: NodeJS & NPM version

Lecture 3: Create a Next.JS project

Lecture 4: App router folder and Page router folder

Lecture 5: Routing system

Lecture 6: The layout.tsx file

Lecture 7: Nav

Lecture 8: Nav items

Lecture 9: Static Site Generation (SSG)

Lecture 10: What about the link to the home page ?

Lecture 11: Navigation and params

Lecture 12: Client components

Lecture 13: Json server : important informations

Lecture 14: Setup API with json-server

Lecture 15: Server side data fetching

Lecture 16: Environment variables

Lecture 17: Cache and revalidations

Lecture 18: Card component

Lecture 19: Article list

Lecture 20: Image fallback

Lecture 21: Optimized fonts

Lecture 22: Metadata

Lecture 23: Articles by category

Lecture 24: Static generation for dynamics route segments

Lecture 25: Handle loading with loading.tsx

Lecture 26: Handle pages errors with error.tsx

Lecture 27: Fetching an article by title

Lecture 28: Displaying an article

Lecture 29: Page not found with not-found.tsx

Lecture 30: Templates with template.tsx

Lecture 31: Summarize Templates in 2 sentences

Lecture 32: Hydratation Missmatch

Lecture 33: Clock component

Lecture 34: Crytpo news api

Lecture 35: Crypto card

Lecture 36: Get rid of shiftings

Lecture 37: Data Streaming explained

Lecture 38: Streaming with Suspense

Lecture 39: A website with 100/100 Lighthouse score

Chapter 3: Full stack project – Code Snippet manager

Lecture 1: Project overview

Lecture 2: Project setup

Lecture 3: Understanding all the project's actors

Lecture 4: Header component

Lecture 5: Auth – Setup Clerk part 1

Lecture 6: Auth – What is a middleware / Setup Clerk part 2

Lecture 7: Auth – Custom auth pages

Lecture 8: Auth – Styling auth

Lecture 9: Auth – Account management and signout

Lecture 10: Database – Supabase database setup

Lecture 11: Database – Prisma and model setup

Lecture 12: Database – Accessing database using prisma

Lecture 13: API – CRUD overview

Lecture 14: API – Creating your first public API endpoint

Lecture 15: API – Body and URI params

Lecture 16: API – Query params

Lecture 17: API – Zod validation

Lecture 18: API – Auth protection

Lecture 19: Nav

Lecture 20: Searchbar and useRouter

Lecture 21: Card component

Lecture 22: Toast

Lecture 23: Snippet List

Lecture 24: Snippet list by technology

Lecture 25: Filtering the lists

Lecture 26: Fetch a unique snippet

Lecture 27: Synthax Highlighter component

Lecture 28: Actions buttons

Lecture 29: Delete dialog

Lecture 30: Delete : Fixing the refresh issue

Lecture 31: Let's summarize data fetching architecture

Lecture 32: Create form

Lecture 33: Hook form basics

Lecture 34: Hook form with zod

Lecture 35: Hook form validation : Create snippet form

Lecture 36: Submit a form

Lecture 37: Update a snippet

Chapter 4: Multiple languages with I18n – next-intl

Lecture 1: Setup next intl

Lecture 2: Translating texts

Lecture 3: Translating clerk components

Lecture 4: Language switcher

Chapter 5: Form actions

Lecture 1: Handling form on the server only