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:

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