Same here. I decided to get back into React, realized CRA was on its way out, decided to look into Next,js, go to RUclips 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.
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
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!
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.
Not everyone who teaches on RUclips provides source code, at times there is a required Cup of coffee as a price. But Traversy is generous and this is worth gratitude.
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!
🎯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
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👍
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.
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.
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 RUclips. 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. 🙂
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!
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.
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.
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!
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.
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.
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)?
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 ♥
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
Hello Brad. First, let me say thank you for this eye opener. After going through this course, I now am confident to have found my go to tool for my web development projects. As usual, it was a pleasure to follow your explanations. I have a kind of strange, may be dumb question about uuid we used around 1:09:30 in the video. How does this uuid tool make sure, that it doesn't create a collision or let's say a double entry? I know, it is almost impossible that this happens, but my question is if it generally could happen. I just go over to your site and enroll for the "Next.js Dev To Deployment" course. I want learn about the deployment process. Thanks again and I wish you all a great time.
As always, Brad reads my mind and creates the tutorial I was secretly hoping for. Kudos man ! And thank you !
Same!!
Read the documentation and make the same.
me too
Same here. I decided to get back into React, realized CRA was on its way out, decided to look into Next,js, go to RUclips 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.
My hero bro Brad !
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
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!
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!
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.
Perfect timing Brad! I'm currently working on a Next JS app for someone and needed a tutorial to get it up and running
It is the best introduction of Next 13 on all over the Internet. Love you 3000😄💐
Not everyone who teaches on RUclips provides source code, at times there is a required Cup of coffee as a price. But Traversy is generous and this is worth gratitude.
As usual everything is clear and simple to understand. Brad what an instructor you are.... 😍🥰🙏
It’s time to get back on coding
I am not even half way through but this is the best introduction to NextJs 13 I have found so far in youtube.
I have been waiting for this course from Traversy Media.
Brad's crash course series provide the best value of time spent since they are usually short enough to finish :-)
Crazy to think I was watching brad back in early 2019… now he has 2 millions subs, well deserved brother!
You never ever disappoint Brad keep doing what you are doing
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!
The "What’s going on guys" is music to my ears. I don't know you but I really appreciate you Brad ❤ Blessings
That Toh toh toh never goes off! love your content since 2017
🎯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
This is one the best tutorials. Not bloated like the other tutorials.
Great! now waiting for NextJS 13 + Strapi course, thanks
This is a great intro to Next 13. Your teaching style is very clear and to the point. Thank you!
Amazing... I was looking for an advanced nextJS course, lo and behold my favourite tutor, Brad, has just created one. Many thanks
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👍
I honestly wish I could have liked this video twice
I learned so much from this and the previous Next.js crash course
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.
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.
Pretty cool video and I actually found it easy to follow without any contact with NextJS or having watched Brad's previous tutorial. Thanks!
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 RUclips. 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. 🙂
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.
Thank you, Brad! I am working on switching careers and can relate to your story. Using your content and advice to get there.
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!
Always the best. You make every tech so approachable and don't get bogged down with the language. Thanks a million!
You'll always be the best. This is B.Traversy
Objective, simple, easy, and always directly to the point. Every video of yours worth to watch. Thanks Brad.
Yes!!!! , was waiting for Brads tutorial on Next13. Thanks!
thanks Brad, hope you are doing very good on the HEALTH front. dnt forget you have to teach my kids too
thanks for the recap to bootstart my next js 13 work, amazing as always Traversy
better than any cloning tutorial because this one cleared all my basic doubt
Yes yes yes! I've been struggling to understand their docs and finally traversy uploads a tutorial 👍.
Thank you for your contribution.
I've been reading the docs and your video made the perfect complement to the theory ✨
Brad, you remain a constant in my professional and personal life. Thank you for dedicating your life to teaching others.
Number one web development channel, please do on Auth js
over 3 months im waiting for the course like this thanks alot i appreciate
Great Tutorial, bud. Really helpful. Next 14 is out when I write this and this is still very relevant
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!
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.
Your content is always amazing. A simple video made my concept clear. Thanks for your contribution. I highly appreciate you.
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.
legen... wait for it... DARY! LEGENDARY... 🙌🏼
lmao was just looking for Nextjs stuff to learn more about SSG and the GOAT dev RUclipsr just launched a video!
Stellar work and performance as always, Brad! This is very helpful, so thank you.
Next 13 is super clear right now, Thank you Brad
highly simplified and clear approach to teach, thanks
I love Brad's Crash Courses 😍
Brad and mosh are truly the best teachers ❤️
all worked, start to finish. great course.
Very basic and simple tutorial of NextJS 13. Thx alot Brad! :)
Thanks for the video, Brad! Right at time to refresh knowledge 😀
Great stuff, keep more coming for the new next.js
Thanks for all the incredible tutorial. you are my favorite mentor. i have learn so much from your tutorials and courses. well done Brad!!
Yahoooo!!! Got it. Just waiting for this kind of crash course.. Thanks Sir 😍😍😍😍😍
I've been waiting for you to come up with something
the exact and an amazing which i was looking for hours . Thank you soo much for such a great video😍😍😍
Thank you for this crash course. This came at the right time for me.
This is exactly what I need. Thanks Brad!
I was waiting for this video! Thank you
So cool. Everything is clearer now,
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!
Plain and simple, thanks a lot Brad, great work!
This is what I have been waiting for ❤
Exactly what i wanted ❤️
Yes exactly 😃😃
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.
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.
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)?
Everything is clear. Thank you man!
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 ♥
Playwright course 🔥🔥
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
This is really nice and easy to understand tutorial. Thanks Brad :))
Many thanks, Brad! Definitely cleared up a few doubts!
Just in time 🙏. Thanks Brad
I've been waiting for you to do this exact tutorial! Seems like they're only a few months away from stable.
Thanks for this! Very easy to understand.
Being anticipating for this.
i was waiting for this kind of videos... Thanks
Wow thanks a bunch brad you really helpled me understand certain things better 😊
Yessssss!!!! Been waiting for this.
I'll be here no matter what
Just the video I needed
Thanks again Brad!
The Goat is back 🔥
This is a great crash-course thanks Brad! Way better than the new course on FE Masters.👍
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 :^ )
Best. Brad you are the best. Thank you!
Hello Brad. First, let me say thank you for this eye opener. After going through this course, I now am confident to have found my go to tool for my web development projects. As usual, it was a pleasure to follow your explanations. I have a kind of strange, may be dumb question about uuid we used around 1:09:30 in the video. How does this uuid tool make sure, that it doesn't create a collision or let's say a double entry? I know, it is almost impossible that this happens, but my question is if it generally could happen. I just go over to your site and enroll for the "Next.js Dev To Deployment" course. I want learn about the deployment process. Thanks again and I wish you all a great time.
thank you very very much,
everybody all the time make tutorial for beginner,
But this one needed for me.
Great content as always. Thanks Brad!
Yeesssss. Saving this one for later 😎.
Thanks, Traversy.
Love you Brad. Had to edit this with no H. 😂
Great work 🙏This tutorial is a masterpiece.