NPM | The Road to Web Development

Autoplay
Autocomplete

Previous Lesson Complete and Continue

The Road to Next (Basic)

Introduction

Welcome to The Road to Next (6:55)
Foreword by Delba de Oliveira, DX Engineer at Vercel
How did you hear about the course?
Join the Community
Learn In Public
Stay Up to Date
Changelog

Setup

Software to create Software (1:32)
Visual Studio Code (VSCode) (2:31)
External Terminal (Optional) (1:43)
Browser (2:25)
Node (2:52)
NPM (2:01)

React Primer (Optional)

Manual setup in Next (9:37)
JSX (2:33)
Components (3:21)
Props (3:06)
Styling (1:13)
Interactions (2:27)
State (3:00)
Composition (3:33)
File Extraction (1:06)
Outro (1:47)

Pitfalls

What are pitfalls? (1:20)
Restarting Things (2:21)
Wrong (Auto) Imports (1:48)
npm install --force (2:12)
Breaking Changes (2:04)

Next.js

create-next-app [C] (6:58)
Next 15 & React 19 (2:52)
Exploring the Starter (6:53)
Git & GitHub (5:54)
Quiz
Deploy (4:17)
Exploring the finished Project (22:51)
Finished Project (Optional)

ESLint (Optional)

Script (4:21)
Quiz
Import Sort [C] (3:04)

File-Based Routing

Pages (5:00)
Quiz
Static and Dynamic Routes [B] (5:05)
Quiz
Link Components (7:06)
Quiz
Absolute Imports (0:47)
Quiz
Path Constants (2:07)
Typed Routes (NEW)
Layout (5:20)
Quiz

TypeScript

Script (2:21)
const Assertions (4:05)

Styling

Tailwind CSS [C] (4:44)
Tailwind CSS in Next (8:25)
Conditional Style (1:49)
Animations with Tailwind [C] (2:29)
Question
SVGs (2:14)

UI Library

Setup [B] (6:04)
Button (4:39)
Card (6:24)
Separator (2:13)
Icons [C] (5:16)
Theming (2:21)
Question

Component Folder

Heading (4:33)
Header (2:22)
Placeholder [C] (9:42)
Quiz

Feature Folder

Intro [B] (1:47)
Extract (4:34)
Quiz
Modify (4:25)
Reuse (4:59)
Quiz

Project Structure

Recap (3:51)
Question

Light & Dark Mode

Implementation (13:15)
Quiz

Server vs Client Components

History Lesson
Data Fetching in Client Components (9:44)
Characteristics of Client Components (2:16)
Quiz
Client-Server Boundary [C] (5:03)
Quiz
Client-Server Composition (3:59)
Quiz

Server Components

History Lesson
Data Fetching in Server Components (6:17)
Question
Quiz
Quiz
SSR vs Server Components (2:40)
Quiz
Server-Side Rendering (4:10)
Streaming (3:40)
Suspense (2:49)

Fallback Routes

Introduction (0:53)
Loading Route (3:20)
Error Route (3:33)
Error Boundary (Optional) (2:55)
Question
Not Found Route (1:59)
Nearest Boundary Bubbling (3:10)

Database

Connect to Database (7:21)

ORM

Prisma (1:29)
Prisma Schema (9:28)
Seeding the Database (7:30)
Prisma Studio (1:53)

Server Queries

Prisma Client (2:20)
Database Queries (6:02)
ORM generated Types (1:51)
Typed APIs (Optional) (4:39)

Server Actions

Server Actions in Client Components (8:57)
Server Actions in Server Components (4:02)
Question

Redirect

redirect (1:13)

Caching

What is caching?
Development vs Production (1:37)
Router Cache (5:35)
Full Route Cache (1:40)
Static vs Dynamic Rendering (6:58)
Time-Based Cache (ISR) (2:44)
On-Demand Caching (ISR) (2:55)
Where do we cache? (1:01)
Request Memoization (5:45)
Generate Static Params (Optional) (3:18)
When to use which caching strategy?
Recap (2:18)

Forms with Server Actions

Create Form (12:12)
Configuration over Composition (Software Craftsmanship) (3:45)
Edit Form [B] (13:04)
DRY with Abstractions (Software Craftsmanship) (8:16)

Forms

Progressive Enhancement (2:49)
useTransition (3:33)
useFormStatus (4:23)
useActionState (3:33)
Form Validation (6:09)
Form Reset (3:26)
Error Handling (6:40)
Field Errors in Forms (7:28)
Premature Optimization (Software Craftsmanship) (7:30)
Action Callbacks (12:49)
Debugging (Software Craftsmanship) (7:57)
Toast Feedback (5:57)
Form Abstraction (4:54)

Cookies

Cookie API [B] (5:11)
Set Cookie [B] (2:18)
Read Cookie [B] (9:57)
Consume Cookie [I]

Templates and Layouts

Pages vs Layouts (4:58)
Layouts vs Templates (5:14)

Database Migrations

Schema Changes (15:53)
Working with Currencies (Bonus) (10:38)
Working with Dates (Bonus) (10:06)

Advanced UIs

Close DatePicker (Controlled Component) (3:46)
Reset DatePicker (key) (4:24)
Exposing Callback Handlers (3:21)
Reset DatePicker (useImperativeHandle) (4:55)
Dropdown Component (6:22)
Ticket Status (Read) (4:20)
Ticket Status (Write) (6:30)
Update Toast Feedback (2:19)
Confirm Dialog (7:31)
Confirm Dialog from Dropdown (Advanced) (7:52)
Delete Toast Feedback (6:41)

Deployment

Development vs Production (4:38)
Vercel (4:17)
Environment Variables (2:56)
Other Environment Variables (3:36)
Question

Authentication

Lucia [B] (7:29)
Paths for Authentication (1:41)
Sign Up (16:06)
Sign In (6:21)
Bugs (Software Craftsmanship) (4:00)
Authentication Status (6:01)
Quiz
Sign Out (9:22)
Header (Server Component) (4:41)
Header (Client Component) (3:07)
The Authentication Flicker [C] (6:49)
Replace Lucia (Challenge)
Question

Database Patterns

One-to-Many Relation (9:24)
Referential Actions (2:36)
Non-Nullable Relation (3:14)
Relation Queries (2:20)
Exclude Sensitive Information (3:11)

Authorization

Protected Routes (8:04)
Where to Authorize? (Discussion)
Ownership (5:35)
Protected APIs (8:15)
Protected UI (2:19)
Quiz

Advanced Navigation

All Tickets vs My Tickets (4:33)
Sidebar (9:51)
Authenticated Sidebar [C] (3:51)
Breadcrumbs (6:10)
Tabs (7:39)
Active Path (Fastest Levenshtein) (8:33)
Account Dropdown (4:33)
Account Page (Challenge)
Quiz
Built-In Sidebar by UI Library (Challenge)

Folder Naming Conventions

Route Groups (3:08)
Private Folders (5:32)

Search & Sort

useSearchParams (7:40)
searchParams [B] (5:31)
Debounce Requests (1:54)
Sort (10:50)

Typed URL State

Typed Search Params [B] (8:04)
useQueryState (9:52)
useQueryStates (6:40)
Composite Key (2:28)
Mediator Components (6:18)
Question

Pagination

URL State (10:49)
Offset-Based Pagination (3:54)
Metadata in Pagination with Prop Drilling (7:29)
Database Transactions (2:08)
Interplay between Interactions (UX) (6:12)
Dynamic Page Size (3:23)

Public API (Route Handler)

Route Handler (5:35)
Route Params in Route Handler [B] (3:39)
Search Params in Route Handler (5:42)

Comments

Intro (with Challenge) (1:37)
Many-to-One Relation (6:24)
Read Comments (10:52)
Create Comment (11:23)
Delete Comment (14:41)
Update Comment (Challenge)

Data Fetching Patterns

Sequential Data Fetching (8:05)
Concurrent Data Fetching (6:13)

Client Components

Explicit Client Components (10:35)
Implicit Client Components (6:24)
Hydration Mismatch (3:00)
Async Client Components (2:28)

Client and Server Components

Client-Server Boundary (1:32)
Client-Server Composition (8:30)

Client-Side React

“use client”; (4:44)
“use server”; (3:15)
Continuous Offset-Based Pagination (6:49)
Initial State (2:34)
Sliding Window (2:58)
Client-Side State: Remove Comment (6:02)
Client-Side State: Add Comment (10:07)
TypeScript Generics (Bonus) (2:44)

Unblocking the UI

Delete Feedback (Toast) (9:08)
Delete Feedback (Button) (4:33)

Cursor-Based Pagination

Cursor-Based Pagination (Timestamp) (5:57)
Cursor-Based Pagination (Unique ID) (5:00)
Native Cursor-Based Pagination (7:02)
Quiz
Deliberate Over-Fetching (3:52)
TypeScript Generics (Bonus) [C] (4:41)

React Query (Optional)

React Query Provider (5:04)
useInfiniteQuery (7:46)
initialData (5:35)
Refetch (Option 1) (3:18)
Invalidate Query (Option 2) (2:14)
Infinite Scroll (4:49)

Domain

Custom Domain (9:52)

End

Write your (public) Feedback
The Road to Next: Software Engineer Journey (Optional)

Pull Requests before The Road to Next (Pro)

feat/migrate-from-lucia-to-oslo

Teach online with

NPM

Additional Resources:

npm
yarn
pnpm
bun

Complete and Continue

Discussion

2 comments