Next.js 13 Crash Course | App Directory, React Server Components & More
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:
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
source