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

  Рет қаралды 194,277

Traversy Media

Traversy Media

Күн бұрын

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

Пікірлер: 299
@philippec4448
@philippec4448 11 ай бұрын
As always, Brad reads my mind and creates the tutorial I was secretly hoping for. Kudos man ! And thank you !
@yvsh
@yvsh 11 ай бұрын
Same!!
@pandalanhukuk804
@pandalanhukuk804 11 ай бұрын
Read the documentation and make the same.
@badbeatslayer
@badbeatslayer 11 ай бұрын
me too
@brentforwood4085
@brentforwood4085 11 ай бұрын
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
@jasonjin251 8 ай бұрын
My hero bro Brad !
@yapper1200
@yapper1200 11 ай бұрын
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!
@larrytron1992
@larrytron1992 11 ай бұрын
Perfect timing Brad! I'm currently working on a Next JS app for someone and needed a tutorial to get it up and running
@bhaskarchetty5419
@bhaskarchetty5419 11 ай бұрын
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.
@korosensei1379
@korosensei1379 11 ай бұрын
It’s time to get back on coding
@sahaneakanayaka3394
@sahaneakanayaka3394 11 ай бұрын
As usual everything is clear and simple to understand. Brad what an instructor you are.... 😍🥰🙏
@codecontinue
@codecontinue 11 ай бұрын
I am not even half way through but this is the best introduction to NextJs 13 I have found so far in youtube.
@user-zn7fm1su8x
@user-zn7fm1su8x Ай бұрын
That Toh toh toh never goes off! love your content since 2017
@temptemp7577
@temptemp7577 11 ай бұрын
It is the best introduction of Next 13 on all over the Internet. Love you 3000😄💐
@dawnkellydottech
@dawnkellydottech 7 ай бұрын
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!
@daydreamical
@daydreamical 10 ай бұрын
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!
@skhubs
@skhubs 11 ай бұрын
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👍
@HoldenReed-qg1gi
@HoldenReed-qg1gi 10 ай бұрын
This is a great intro to Next 13. Your teaching style is very clear and to the point. Thank you!
@Bruno87198
@Bruno87198 10 ай бұрын
Objective, simple, easy, and always directly to the point. Every video of yours worth to watch. Thanks Brad.
@ChinchillaDave
@ChinchillaDave 10 ай бұрын
Brad, you remain a constant in my professional and personal life. Thank you for dedicating your life to teaching others.
@Brocollipy
@Brocollipy 10 ай бұрын
Always the best. You make every tech so approachable and don't get bogged down with the language. Thanks a million!
@nwaguchima2280
@nwaguchima2280 11 ай бұрын
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.
@unhandledexception1948
@unhandledexception1948 6 ай бұрын
Brad's crash course series provide the best value of time spent since they are usually short enough to finish :-)
@derrickakomeah
@derrickakomeah 11 ай бұрын
You never ever disappoint Brad keep doing what you are doing
@Salah-YT
@Salah-YT 8 ай бұрын
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. 🙂
@Mossad84
@Mossad84 11 ай бұрын
I have been waiting for this course from Traversy Media.
@hasgotech380
@hasgotech380 7 ай бұрын
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.
@aubreyocallaghan4539
@aubreyocallaghan4539 11 ай бұрын
Amazing... I was looking for an advanced nextJS course, lo and behold my favourite tutor, Brad, has just created one. Many thanks
@cesarjaramillo9455
@cesarjaramillo9455 11 ай бұрын
Thank you, Brad! I am working on switching careers and can relate to your story. Using your content and advice to get there.
@enmanuelr7
@enmanuelr7 11 ай бұрын
The "What’s going on guys" is music to my ears. I don't know you but I really appreciate you Brad ❤ Blessings
@vadimcoj
@vadimcoj 11 ай бұрын
Great! now waiting for NextJS 13 + Strapi course, thanks
@metasavagex
@metasavagex 11 ай бұрын
Crazy to think I was watching brad back in early 2019… now he has 2 millions subs, well deserved brother!
@theMiaow
@theMiaow 11 ай бұрын
Yes yes yes! I've been struggling to understand their docs and finally traversy uploads a tutorial 👍. Thank you for your contribution.
@stillready6405
@stillready6405 7 ай бұрын
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.
@bailimohamedali1466
@bailimohamedali1466 7 ай бұрын
thanks for the recap to bootstart my next js 13 work, amazing as always Traversy
@abhikbanerjee3719
@abhikbanerjee3719 11 ай бұрын
This is one the best tutorials. Not bloated like the other tutorials.
@JM-hf9bl
@JM-hf9bl 8 ай бұрын
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
@rayromanov 9 ай бұрын
Stellar work and performance as always, Brad! This is very helpful, so thank you.
@mrahamed5985
@mrahamed5985 8 ай бұрын
Your content is always amazing. A simple video made my concept clear. Thanks for your contribution. I highly appreciate you.
@yongdiamond2301
@yongdiamond2301 7 ай бұрын
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.
@bohanwang-nt7qz
@bohanwang-nt7qz Ай бұрын
🎯Course outline for quick navigation: [00:00-02:23]1. Next.js v13 features -[00:00-00:31]Next.js version 13 features include app directory, react server components, layout, and new api route handlers. -[00:35-01:05]Next.js version 13 features for those familiar with next.js, covering layouts, app directory, and data fetching, to be demonstrated through a project. -[01:19-01:48]Tutorial on setting up layouts, routes, and fetching data from github api with automatic loader feature. [02:23-21:57]2. Next.js project setup and features -[02:23-02:55]Creating a project using create next app and npx create-next-app. -[03:17-04:10]Configuring project settings, using experimental app directory, and running dev server. -[04:57-05:21]Config file has experimental object with appdir set to true for new app directory structure. -[06:34-07:00]Replacing global css with final project's, dark gray background. importing poppins font. -[07:22-07:48]Creating a folder in the pages directory to load components in next13. -[10:59-11:28]Next 13 uses layout.js in the app directory to wrap components, simplifying previous layout creation process. -[13:38-14:09]Metadata updated with page title 'traversey media' and description 'web development tutorials and courses.' -[20:29-21:31]Creating links, importing header, discussing react server components. [21:58-28:08]3. React server components and github repos route -[21:58-23:07]React server components offer faster loading, smaller client bundle, seo benefits, improved security, limited interactivity. -[24:14-24:38]Fetching data from server component is simple and avoids use effect dependencies. -[25:10-26:04]Using github api, fetching user's repositories to be displayed in the ui. -[27:51-28:17]Discusses avoiding use of client for console log in browser. [28:09-33:53]4. Installing react icons and dynamic routing -[28:09-29:09]Setting up react icons and importing font awesome icons for stargazer count and code branches. -[31:09-32:13]Fetching repositories and displaying stats using react server component, with easy loading page creation. [33:54-44:09]5. Implementing dynamic routes and suspense boundaries -[34:17-34:42]Creating dynamic routes for specific repo pages using folder brackets -[36:12-36:47]Demonstrating destructuring and introducing suspense boundaries for data fetching. -[38:01-38:36]Creating an asynchronous function to fetch repo using props and name. -[38:48-40:02]Developing and testing repo component, fetching specific repository and adding link to github page. [44:10-51:29]6. Implementing directory filtering and data fetching optimization -[44:10-44:34]Using 'contents' to filter directories and ensure they are type 'dir'. -[45:31-47:17]Implemented suspense boundary to load components efficiently and reduce wait time. -[48:06-48:39]Using suspense boundaries for better user experience, caching, and revalidating data. -[49:49-50:18]Setting revalidation time to 60 seconds for caching data. [51:31-01:05:29]7. Next.js route handling -[51:31-51:59]Api route handlers allow custom request handling for routes, simplifying backend structure. -[53:53-54:19]Using json file for route handlers, can use orm like prisma for database data fetching. -[55:47-56:14]Successful get request to api courses, aiming to display data on the home page. -[01:00:27-01:00:56]Demonstrating how to retrieve query parameters for course search. [01:05:30-01:22:44]8. Handling post requests in api and client components -[01:05:30-01:05:58]Demonstrating obtaining body data for post form in api routing. -[01:08:22-01:08:51]Adding new course to memory using npm install to import uuid. -[01:12:10-01:12:38]Using useeffect for client components, enabling interactivity with search boxes. -[01:18:31-01:19:05]Creating a search button with class search-button and type submit, and defining a handler to prevent default behavior and log the query. offered by Coursnap
@gersonmayer
@gersonmayer 7 ай бұрын
I've been reading the docs and your video made the perfect complement to the theory ✨
@rebazjabar7660
@rebazjabar7660 11 ай бұрын
over 3 months im waiting for the course like this thanks alot i appreciate
@uiuxengineer
@uiuxengineer 11 ай бұрын
Thanks for the video, Brad! Right at time to refresh knowledge 😀
@arikert3243
@arikert3243 11 ай бұрын
Thanks for all the incredible tutorial. you are my favorite mentor. i have learn so much from your tutorials and courses. well done Brad!!
@alexavery8182
@alexavery8182 5 ай бұрын
I honestly wish I could have liked this video twice I learned so much from this and the previous Next.js crash course
@Brilla231
@Brilla231 10 ай бұрын
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!
@kiennguyen-sy2hn
@kiennguyen-sy2hn 9 ай бұрын
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.
@NURTECH
@NURTECH 11 ай бұрын
Next 13 is super clear right now, Thank you Brad
@saabirmohamed636
@saabirmohamed636 11 ай бұрын
Yes!!!! , was waiting for Brads tutorial on Next13. Thanks!
@NicklasHolmqvist
@NicklasHolmqvist 10 ай бұрын
Very basic and simple tutorial of NextJS 13. Thx alot Brad! :)
@RNMERIA
@RNMERIA 11 ай бұрын
thanks Brad, hope you are doing very good on the HEALTH front. dnt forget you have to teach my kids too
@matthiasmatanda4295
@matthiasmatanda4295 6 ай бұрын
You'll always be the best. This is B.Traversy
@awabomer
@awabomer 11 ай бұрын
Brad and mosh are truly the best teachers ❤️
@ernestisaev6543
@ernestisaev6543 11 ай бұрын
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)?
@fahadjawad5235
@fahadjawad5235 10 ай бұрын
the exact and an amazing which i was looking for hours . Thank you soo much for such a great video😍😍😍
@heguer87
@heguer87 11 ай бұрын
Plain and simple, thanks a lot Brad, great work!
@nirmesh44
@nirmesh44 11 ай бұрын
better than any cloning tutorial because this one cleared all my basic doubt
@sarkazein7
@sarkazein7 11 ай бұрын
highly simplified and clear approach to teach, thanks
@baruchokoye6037
@baruchokoye6037 11 ай бұрын
Thank you for this crash course. This came at the right time for me.
@ahmednur2837
@ahmednur2837 11 ай бұрын
Brad. if there is better words than Thank you. I would say it to you. Thank you very much Brad. and i really hope that you will create tutorial about "Frontend Authentications with backend"
@mosiurrahman309
@mosiurrahman309 11 ай бұрын
Yahoooo!!! Got it. Just waiting for this kind of crash course.. Thanks Sir 😍😍😍😍😍
@rico5146
@rico5146 11 ай бұрын
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.
@AkashPandya9
@AkashPandya9 4 ай бұрын
legen... wait for it... DARY! LEGENDARY... 🙌🏼
@TerryMitchell
@TerryMitchell 11 ай бұрын
Many thanks, Brad! Definitely cleared up a few doubts!
@odonodave
@odonodave 11 ай бұрын
This is a great crash-course thanks Brad! Way better than the new course on FE Masters.👍
@kenthefley2226
@kenthefley2226 11 ай бұрын
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.
@TheCodeDealer
@TheCodeDealer 11 ай бұрын
This is really nice and easy to understand tutorial. Thanks Brad :))
@templelomotey5414
@templelomotey5414 11 ай бұрын
Thanks Brad, exactly what I'm looking for 😍
@abolanleadebanjo6154
@abolanleadebanjo6154 11 ай бұрын
Wow thanks a bunch brad you really helpled me understand certain things better 😊
@edutech8909
@edutech8909 11 ай бұрын
Just the video I needed Thanks again Brad!
@RostyslavDzhohola
@RostyslavDzhohola 5 ай бұрын
Great stuff, keep more coming for the new next.js
@raptordev2235
@raptordev2235 11 ай бұрын
I love Brad's Crash Courses 😍
@anthonychemaly2662
@anthonychemaly2662 9 ай бұрын
This is exactly what I need. Thanks Brad!
@Krawcu_
@Krawcu_ 11 ай бұрын
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 :^ )
@RobertDylina
@RobertDylina 11 ай бұрын
I've been waiting for you to do this exact tutorial! Seems like they're only a few months away from stable.
@yemanealem9573
@yemanealem9573 10 ай бұрын
Everything is clear. Thank you man!
@proMehediBD
@proMehediBD 11 ай бұрын
I was waiting for this video! Thank you
@Dragonten312
@Dragonten312 11 ай бұрын
lmao was just looking for Nextjs stuff to learn more about SSG and the GOAT dev KZbinr just launched a video!
@xyz-ey7ul
@xyz-ey7ul 11 ай бұрын
I wasn't really into using any react framework but this version of next is just too good. I don't even feel like I am using a react framework. it still feels like react alone but with everything I need out of the box.
@devbravo4158
@devbravo4158 11 ай бұрын
Yeesssss. Saving this one for later 😎. Thanks, Traversy.
@abhishekchaudhary8965
@abhishekchaudhary8965 11 ай бұрын
Great work 🙏This tutorial is a masterpiece.
@JohnOswalt
@JohnOswalt 8 ай бұрын
@TraversyMedia All of the documentation using the App Router only shows fetching data. Can you modify data using the App Router and React Server Components? Do you have any recommendation for modifying data if we want to use the App Router?
@mauriciotrejos9934
@mauriciotrejos9934 11 ай бұрын
Great content as always. Thanks Brad!
@politeboy2996
@politeboy2996 9 ай бұрын
thank you very very much, everybody all the time make tutorial for beginner, But this one needed for me.
@hawarhekmat1174
@hawarhekmat1174 11 ай бұрын
This is what I have been waiting for ❤
@breezycodes
@breezycodes 11 ай бұрын
As a NuxtJS pro.. I'm gonna start learning next here.. I heard the v13 is a totally different framework.. I will be watching this later Brad.. thanks in advance
@okiroroobrutheanagho8779
@okiroroobrutheanagho8779 11 ай бұрын
I've been waiting for you to come up with something
@frugodwill
@frugodwill 11 ай бұрын
Question: what is the default data found when one inspects a client component? Like in next12, get static props will actually help get data and build the page so it’s seo friendly and you can still use hooks Next13 seems to go right back to core react where page is empty until useEffect brings in data .
@smilefriend7171
@smilefriend7171 10 ай бұрын
So cool. Everything is clearer now,
@karsongrady
@karsongrady 11 ай бұрын
Just in time 🙏. Thanks Brad
@abelmurua6980
@abelmurua6980 10 ай бұрын
Great! But I’m getting infinite loop with this approach (27:20 data fetching) it seems it’s happening with that approach because it’s a server side fetch then component gets re-render then again another fetch. There is a guy that already reported it. Any thoughts on this? Did you check your network tab? Maybe I’m wrong! My approach has the “use client” line because it then has some hooks. I think it may have to be in a different file. Wanted to ask you about it. I follow you, your videos are awesome thank you.
@user-bv7zx4lp1q
@user-bv7zx4lp1q 7 ай бұрын
Hi @TraversyMedia, Thank you for the amazing tutorials, I am watching and following all your videos, quick question, which Macbook are you using for recording your videos? I am recording games and I am using Macbook Pro 13 inch with 1.4 GHz Quad-Core Intel Core i5 processor, but as soon as I start recording, the Fan produce too much noisy sound? is there away to cancel background noise?
@galickidigital
@galickidigital 6 ай бұрын
Best. Brad you are the best. Thank you!
@bingerminn
@bingerminn 11 ай бұрын
Yessssss!!!! Been waiting for this.
@jaeken
@jaeken 9 ай бұрын
Great tutorial! I have a problem though. I authenticate using msal (azure ad) in the front end. This auth state is shared through the application via a context. Every api call requires fetching a token. This token method cannot be used in server components. Now I want to fetch my data with server components but i dont know how to pass the token to the server components to verify the user.
@nyxandtyr
@nyxandtyr 6 ай бұрын
Thanks for this! Very easy to understand.
@MnatsakanMatSharafyan
@MnatsakanMatSharafyan 11 ай бұрын
This is really great crash course. The only challenge is the length of the video. It is almost 1.5 hour, however, I have watched it with INTED chrome extension and complete in 50 minutes. Thanks for this!
@BeastFish22
@BeastFish22 9 ай бұрын
Hello, I have one question. Lets say we turn all of our components into client components with 'use client' including pages. What becomes the rendering method? Is it full Client side rendering or we still generate static html on server and hydrate it later with js ?
@ayoubahabchane
@ayoubahabchane 11 ай бұрын
Hello Brad 👋🏼 I hiccuped at the suspense part of the crash course. Unless I mark the whole page as a client component, adding suspense boundaries doesn't seem to have any effect; the page still won't render until everything is ready. I cloned the project just to make sure that this behavior isn't caused by some tweak of mine, and the issues persisted. Thank your for making this ♥
@ShefainSarkarMahi-mz6nj
@ShefainSarkarMahi-mz6nj 11 ай бұрын
i was waiting for this kind of videos... Thanks
@TheTatsin
@TheTatsin 11 ай бұрын
Thank you, hope more courses for vue and Nuxtjs :)
@nuke7
@nuke7 11 ай бұрын
How can you solve the build error: "Binding element 'name' implicitly has an 'any' type." 40:01
@anshulanand02
@anshulanand02 11 ай бұрын
Exactly what i wanted ❤️
@TutoGenial
@TutoGenial 11 ай бұрын
Yes exactly 😃😃
@NightstalkerKK
@NightstalkerKK 11 ай бұрын
can you do a tutorial on react native,with their new layout navigation system that resembles nextjs?
Build A RealTime Chat App With React & Appwrite Cloud
2:21:14
Traversy Media
Рет қаралды 55 М.
10 common mistakes with the Next.js App Router
20:37
Vercel
Рет қаралды 140 М.
Sigma Girl Love #sigmagirl #funny #comedyvideo
00:25
CRAZY GREAPA
Рет қаралды 4,5 МЛН
Are You Too Dumb To Code? A Chat About Imposter Syndrome
7:08
Traversy Media
Рет қаралды 58 М.
You might not need useEffect() ...
21:45
Academind
Рет қаралды 67 М.
React JS Crash Course
1:48:48
Traversy Media
Рет қаралды 3,4 МЛН
Next js Tutorial for Beginners | Nextjs 13 (App Router) with TypeScript
1:02:55
Programming with Mosh
Рет қаралды 428 М.
Stop Worrying About AI!
6:40
Traversy Media
Рет қаралды 44 М.
Next.js 13 - The Basics
9:00
Beyond Fireship
Рет қаралды 566 М.
React Server Components: A Comprehensive Breakdown
52:42
Theo - t3․gg
Рет қаралды 83 М.
AI Music: It's WAY Better Than You Think
12:06
Matt Wolfe
Рет қаралды 10 М.
Simple Next.js & React Authentication With Clerk
49:35
Traversy Media
Рет қаралды 41 М.
15 Web Developer-Related Career Paths
25:19
Traversy Media
Рет қаралды 119 М.
Возможно ли удалить интернет? 🌐
0:35
ЗАРАЗ
Рет қаралды 1,6 МЛН
Телефон моей семьи
0:10
AndroHack
Рет қаралды 854 М.
Матку-дрон Пчелка стали использовать в России
0:54