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:

Blog Post:

All Of My Courses:

Deploy to Vercel for Free:

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

[qcmira]

As always, Brad reads my mind and creates the tutorial I was secretly hoping for. Kudos man ! And thank you !

[lewissheridan]

I just want to pause and let you know that you’re an inspiration. Your method of teaching has an authenticity that is unmatched. A humility that is admirable. Thank you for doing what you’re doing and I wish you every success. I’m in awe and admiration. You totally rock

[bhaskarchetty]

I have been working with Nextjs for over a year. When I got to know about the latest version 13 update. I had to learn about this new version immediately, but was so bored to go over the documentation again. I just came to youtube a searched for a crash course and guess what Brad has already posted entire video for the new version! Thank you so much Brad.

[Hlis_kun]

You've taught me so much I haven't needed to watch your videos in a while. But since Next 13 came out, I feel I haven't been using it correctly. Of course, you're here to save my a** once again.

I really appreciate what you do. Thanks so much!

[larrytron]

Perfect timing Brad! I'm currently working on a Next JS app for someone and needed a tutorial to get it up and running

[codecontinue]

I am not even half way through but this is the best introduction to NextJs 13 I have found so far in youtube.

[derickshalo]

Bro, you are an inspiration. Far far far superior than the other charlatans who are making tutorials just for, and only for money. God bless you!

[hasgotech]

Not everyone who teaches on Youtube provides source code, at times there is a required Cup of coffee as a price. But Traversy is generous and this is worth gratitude.

[temptemp]

It is the best introduction of Next 13 on all over the Internet. Love you 3000😄💐

[sahaneakanayaka]

As usual everything is clear and simple to understand. Brad what an instructor you are.... 😍🥰🙏

[dawnkellydottech]

Thank you so much, Brad! I was barely getting the hang of Next and then it all changed and I was lost all over again. This video cleared up a lot of issues. Thank you, thank you!

[Salah-YT]

Dear Brad, I can't thank you enough for your Next.js crash course; it's simply the best! Your teaching style is top-notch, and I thoroughly enjoy learning from you. You're undoubtedly the best instructor on Udemy and YouTube. Your expertise is invaluable, and I'm grateful for the knowledge you've shared. Wishing you a fantastic life filled with success and happiness! Keep inspiring learners like me. 🙂

[derrickakomeah]

You never ever disappoint Brad keep doing what you are doing

[metasavagex]

Crazy to think I was watching brad back in early 2019… now he has 2 millions subs, well deserved brother!

[aubreyocallaghan]

Amazing... I was looking for an advanced nextJS course, lo and behold my favourite tutor, Brad, has just created one. Many thanks

[SatoshiNakamono]

I have been waiting for this course from Traversy Media.

[nwaguchima]

Still the King of crash courses. No one comes close. Funny how I have been using nextjs13, so I was really looking to see how this will go. I will wished this came out earlier, because I had a lot of struggles before working with next13. Thank you for all you do Brad.

[vadimcoj]

Great! now waiting for NextJS 13 + Strapi course, thanks

[BilalAmin-vz]

That Toh toh toh never goes off! love your content since 2017

[daydreamical]

This was really really useful. Having just watched your previous crash video about Next, this was just perfect to get up to speed with the new version and understand what is different from the previous one. Thanks a ton for another great video!