Next.js 13 Crash Course: App Directory & Server Components 🚀

A complete crash course to NextJS version 13 and it's new features such as the app directory structure, routing, React Server Components vs client components, layouts and more.

Code:
https://github.com/bradtraversy/next-13-crash-course

Original Next.js Crash Course:
https://www.youtube.com/watch?v=mTz0GXj8NN0

Blog Post:
https://www.traversymedia.com/blog/next-js-13-crash-course-app-directory-server-components-more

All Of My Courses:
https://traversymedia.com

Deploy to Vercel for Free:
https://vercel.com/ambassadors/bradtraversy

Timestamps:
0:00 - Intro
2:32 - Setup & File Structure
5:22 - Homepage & Clean Up
7:12 - Routing System
10:02 - Nested Routes
11:04 - Layouts
13:37 - Metadata API
15:31 - next/font/google
19:10 - Header Component
21:19 - React Server Components
23:26 - use client
24:13 - Data Fetching
28:05 - ReposPage Output
31:47 - Custom Loading Page
34:16 - Dynamic Routes
35:30 - params Prop
37:07 - Repo & RepoDir Component
45:57 - Suspense Boundaries
48:29 - Caching & Revalidating
51:30 - API Route Handlers
53:49 - Serving Course Data
56:00 - Fetching Course Data
1:00:32 - Getting Search Params
1:06:00 - Getting Body Data
1:10:00 - Refactor Server to Client Component
1:16:30 - Search Component