Next.js 13 Crash Course | App Directory, React Server Components & More

Подписаться 2,2 млн

Просмотров 200 тыс.

50% 1

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

Наука

Опубликовано:

16 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 299

@sahaneakanayaka3394 Год назад

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

@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

@Bruno87198 Год назад

Objective, simple, easy, and always directly to the point. Every video of yours worth to watch. Thanks 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.

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

@korosensei1379 Год назад

It’s time to get back on coding

@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 RU-vid 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 10 месяцев назад

My hero bro 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!

@holdenreed_music Год назад

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

@Brocollipy Год назад

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

@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.

@ChinchillaDave Год назад

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

@dawnkellydottech 9 месяцев назад

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!

@derrickakomeah Год назад

You never ever disappoint Brad keep doing what you are doing

@cesarjaramillo9455 Год назад

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

@aubreyocallaghan4539 Год назад

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

@theMiaow Год назад

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

@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👍

@Mossad84 Год назад

I have been waiting for this course from Traversy Media.

@JM-hf9bl 11 месяцев назад

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

@rayromanov 11 месяцев назад

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

@temptemp7577 Год назад

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

@metasavagex Год назад

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

@vadimcoj Год назад

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

@abhikbanerjee3719 Год назад

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

@unhandledexception1948 9 месяцев назад

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

@uiuxengineer Год назад

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

@stillready6405 10 месяцев назад

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.

@saabirmohamed636 Год назад

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

@NicklasHolmqvist Год назад

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

@rebazjabar7660 Год назад

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

@heguer87 Год назад

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

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

@codecontinue Год назад

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

@mrahamed5985 11 месяцев назад

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!

@Salah-YT 11 месяцев назад

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 RU-vid. 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. 🙂

@user-zn7fm1su8x 3 месяца назад

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

@raqibnur Год назад

Next 13 is super clear right now, Thank you Brad

@bailimohamedali1466 9 месяцев назад

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

@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.

@TerryMitchell Год назад

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

@sarkazein7 Год назад

highly simplified and clear approach to teach, thanks

@RostyslavDzhohola 8 месяцев назад

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

@AkashPandya9 7 месяцев назад

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

@enmanuelr7 Год назад

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

@proMehediBD Год назад

I was waiting for this video! Thank you

@anthonychemaly2662 Год назад

This is exactly what I need. Thanks Brad!

@baruchokoye6037 Год назад

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

@gersonmayer 9 месяцев назад

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

@alexavery8182 8 месяцев назад

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

@templelomotey5414 Год назад

Thanks Brad, exactly what I'm looking for 😍

@smilefriend7171 Год назад

So cool. Everything is clearer now,

@edutech8909 Год назад

Just the video I needed Thanks again Brad!

@karsongrady Год назад

Just in time 🙏. Thanks Brad

@RNMERIA Год назад

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

@yemanealem9573 Год назад

Everything is clear. Thank you man!

@mauriciotrejos9934 Год назад

Great content as always. Thanks Brad!

@peterfaretra 28 дней назад

Great Tutorial, bud. Really helpful. Next 14 is out when I write this and this is still very relevant

@hasgotech380 10 месяцев назад

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

@raptordev2235 Год назад

I love Brad's Crash Courses 😍

@TheCodeDealer Год назад

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

@okiroroobrutheanagho8779 Год назад

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

@mosiurrahman309 Год назад

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

@aadinoyis Год назад

Being anticipating for this.

@abolanleadebanjo6154 Год назад

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

@nyxandtyr 9 месяцев назад

Thanks for this! Very easy to understand.

@odonodave Год назад

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

@devbravo4158 Год назад

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

@matthiasmatanda4295 9 месяцев назад

You'll always be the best. This is B.Traversy

@ShefainSarkarMahi-mz6nj Год назад

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

@nirmesh44 Год назад

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

@awabomer Год назад

Brad and mosh are truly the best teachers ❤️

@hawarhekmat1174 Год назад

This is what I have been waiting for ❤

@yongdiamond2301 10 месяцев назад

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.

@abhishekchaudhary8965 Год назад

Great work 🙏This tutorial is a masterpiece.

@bingerminn Год назад

Yessssss!!!! Been waiting for this.

@atanumojumdar Год назад

Love you buddy, really needed this

@greenshaheen6716 Год назад

waiting for this. Thanks ❤

@fahadjawad5235 Год назад

the exact and an amazing which i was looking for hours . Thank you soo much for such a great video😍😍😍

@sanjaybatak3549 Год назад

Perfect timing Brad.

@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.