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:
github.com/bradtraversy/next-...
Original Next.js Crash Course:
• Next.js Crash Course
Blog Post:
www.traversymedia.com/blog/ne...
All Of My Courses:
traversymedia.com
Deploy to Vercel for Free:
vercel.com/ambassadors/bradtr...
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

[@korosensei1379]

It’s time to get back on coding

[@larrytron1992]

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

[@sahaneakanayaka3394]

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

[@philippec4448]

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

[@yvsh]

Same!!

[@pandalanhukuk804]

Read the documentation and make the same.

[@badbeatslayer]

me too

[@brentforwood4085]

Same here. I decided to get back into React, realized CRA was on its way out, decided to look into Next,js, go to KZbin and look it up to see what was out there, Traversy Media crash course posted 22 hours ago (from time of this post). It's uncanny.

[@jasonjin251]

My hero bro Brad !

[@bhaskarchetty5419]

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.

[@Bruno87198]

Objective, simple, easy, and always directly to the point. Every video of yours worth to watch. Thanks Brad.

[@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!

[@cesarjaramillo9455]

Thank you, Brad! I am working on switching careers and can relate to your story. Using your content and advice to get there.

[@nwaguchima2280]

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.

[@Brocollipy]

Always the best. You make every tech so approachable and don't get bogged down with the language. Thanks a million!

[@HoldenReed-qg1gi]

This is a great intro to Next 13. Your teaching style is very clear and to the point. Thank you!

[@derrickakomeah]

You never ever disappoint Brad keep doing what you are doing

[@yapper1200]

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!

[@ChinchillaDave]

Brad, you remain a constant in my professional and personal life. Thank you for dedicating your life to teaching others.

[@rayromanov]

Stellar work and performance as always, Brad! This is very helpful, so thank you.

[@uiuxengineer]

Thanks for the video, Brad! Right at time to refresh knowledge 😀

[@heguer87]

Plain and simple, thanks a lot Brad, great work!

[@abhikbanerjee3719]

This is one the best tutorials. Not bloated like the other tutorials.

[@vadimcoj]

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

[@rebazjabar7660]

over 3 months im waiting for the course like this thanks alot i appreciate

[@skhubs]

My real coding hero return back, i love code because Brad sir teaching style awesome and simple. Always waiting all subscriber tutorial.🎉 Thanks Brad sir👍

[@aubreyocallaghan4539]

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

[@Mossad84]

I have been waiting for this course from Traversy Media.

[@JM-hf9bl]

Pretty cool video and I actually found it easy to follow without any contact with NextJS or having watched Brad's previous tutorial. Thanks!

[@theMiaow]

Yes yes yes! I've been struggling to understand their docs and finally traversy uploads a tutorial 👍. Thank you for your contribution.

[@TerryMitchell]

Many thanks, Brad! Definitely cleared up a few doubts!

[@unhandledexception1948]

Brad's crash course series provide the best value of time spent since they are usually short enough to finish :-)

[@arikert3243]

Thanks for all the incredible tutorial. you are my favorite mentor. i have learn so much from your tutorials and courses. well done Brad!!

[@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!

[@edutech8909]

Just the video I needed Thanks again Brad!

[@NicklasHolmqvist]

Very basic and simple tutorial of NextJS 13. Thx alot Brad! :)

[@metasavagex]

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

[@mauriciotrejos9934]

Great content as always. Thanks Brad!

[@saabirmohamed636]

Yes!!!! , was waiting for Brads tutorial on Next13. Thanks!

[@RostyslavDzhohola]

Great stuff, keep more coming for the new next.js

[@raqibnur]

Next 13 is super clear right now, Thank you Brad

[@baruchokoye6037]

Thank you for this crash course. This came at the right time for me.

[@temptemp7577]

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

[@templelomotey5414]

Thanks Brad, exactly what I'm looking for 😍

[@anthonychemaly2662]

This is exactly what I need. Thanks Brad!

[@sarkazein7]

highly simplified and clear approach to teach, thanks

[@mrahamed5985]

Your content is always amazing. A simple video made my concept clear. Thanks for your contribution. I highly appreciate you.

[@Brilla231]

Been looking for a good resource for the new update. This gave me everything i need to use Next 13 with my latest project! Thanks!

[@yemanealem9573]

Everything is clear. Thank you man!

[@karsongrady]

Just in time 🙏. Thanks Brad

[@user-zn7fm1su8x]

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

[@kiennguyen-sy2hn]

Your crash course is very useful and it helps me a lot. Your lesson is simple, clear and easy to understand. Thank you, wish you all the best. Hope to see your new videos.

[@proMehediBD]

I was waiting for this video! Thank you

[@abhishekchaudhary8965]

Great work 🙏This tutorial is a masterpiece.

[@raptordev2235]

I love Brad's Crash Courses 😍

[@AkashPandya9]

legen... wait for it... DARY! LEGENDARY... 🙌🏼

[@odonodave]

This is a great crash-course thanks Brad! Way better than the new course on FE Masters.👍

[@abolanleadebanjo6154]

Wow thanks a bunch brad you really helpled me understand certain things better 😊

[@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 KZbin. 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. 🙂

[@nyxandtyr]

Thanks for this! Very easy to understand.

[@smilefriend7171]

So cool. Everything is clearer now,

[@TheCodeDealer]

This is really nice and easy to understand tutorial. Thanks Brad :))

[@ernestisaev6543]

As always, great video! I've been watching Brad from the very beginning and I'm glad that the content is always excellent! Brad, can you share the settings of your VS Code? Font, theme, text size when you work (not for youtube videos)?

[@greenshaheen6716]

waiting for this. Thanks ❤

[@bedribulut]

just perfect. thank you so much mate.

[@techAshishSinghBaghel]

Great Tutorial Brad, thanks a ton !

[@ShefainSarkarMahi-mz6nj]

i was waiting for this kind of videos... Thanks

[@awabomer]

Brad and mosh are truly the best teachers ❤️

[@bailimohamedali1466]

thanks for the recap to bootstart my next js 13 work, amazing as always Traversy

[@atanumojumdar]

Love you buddy, really needed this

[@hawarhekmat1174]

This is what I have been waiting for ❤

[@Krawcu_]

very cool I had a problem with the concept of when to use the server vs client component but I think it got a little bit clearer :^ )

[@rico5146]

In dynamic segment structure, all segment pages will be handled as SSR(No generateStaticParams function exist), So if you want to change SSR to ISR(Revalidation) then you need to configure something more. First, add generateStaticParams function to the segment page to cache the data and then specify next revalidation option in fetch function. You can check this by typing npm run build and npm run start.

[@okiroroobrutheanagho8779]

I've been waiting for you to come up with something

[@bingerminn]

Yessssss!!!! Been waiting for this.

[@devbravo4158]

Yeesssss. Saving this one for later 😎. Thanks, Traversy.

[@hasgotech380]

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

[@anasalkhamis1679]

thank you, Brad you are the best

[@aadinoyis]

Being anticipating for this.

[@nirmesh44]

better than any cloning tutorial because this one cleared all my basic doubt

[@mosiurrahman309]

Yahoooo!!! Got it. Just waiting for this kind of crash course.. Thanks Sir 😍😍😍😍😍

[@gersonmayer]

I've been reading the docs and your video made the perfect complement to the theory ✨

[@sanjaybatak3549]

Perfect timing Brad.

[@stillready6405]

Thank you so much, the video was very helpful to me! I read the official documentation for hours just to not get it to work and you just explained everything I needed to know and more.

[@costagmc1]

thanks brad!

[@AmirDaniel-pn1wu]

man, this is gold

[@RobertDylina]

I've been waiting for you to do this exact tutorial! Seems like they're only a few months away from stable.

[@Nanashi-rq7lk]

Thank you for the nice turorial

[@enmanuelr7]

The "What’s going on guys" is music to my ears. I don't know you but I really appreciate you Brad ❤ Blessings

[@ahmednabil4456]

Thank you for the great video ❤

[@alexavery8182]

I honestly wish I could have liked this video twice I learned so much from this and the previous Next.js crash course

[@mohammadmo9290]

Good one, Thank you brad

[@kenthefley2226]

One of your best tutorials, Brad. Thank you. I was kinda hoping you would talk about the generateStaticParams function. Is there any need for that in this project? I am still struggling to understand what that is used for.

[@TheTatsin]

Thank you, hope more courses for vue and Nuxtjs :)

[@RNMERIA]

thanks Brad, hope you are doing very good on the HEALTH front. dnt forget you have to teach my kids too

[@Another0neTime]

Legendary. Thanks!

[@yongdiamond2301]

I was lost in Next JS like lost in Sahara but after watched and practiced with your Crash Course it's kind of I'm having a way to get back to home.

[@code_with_sheynet]

Thank you brad ❤

[@pergotthardsson8304]

Great tutorial. Thank you!

[@galickidigital]

Best. Brad you are the best. Thank you!

[@okpain8324]

Thank you alot Brad that help alot

[@johnnychun2017]

Amazing video at the right time!!

[@adimardev1550]

awesome!

[@alwaysgrowww]

Waiting for this!

[@codecontinue]

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