I cannot thank you enough Brad! as a man from a deprived community and a poor country in Africa you have empowered me greatly with your content on this channel now, I am full-stack working for myself only from watching your videos. you're a blessing to the world!
Brad you will always be the most helpful webdev youtuber I've ever encountered. Started watching your tutorials when I was in first year of my computer science degree at my university's cafe and now I'm preparing for my 3rd internship this summer and then graduation in December. You've played an important role in me learning web development. Thank you!
Hi Brad! Thanks for the great tutorial! Just a little bit of errata: @39:55 when you mapped out the Article list into the grid as cards, each of the card needs a unique id. The simple fix is to add the key={article.id} as a prop:
THIS IS THE BEST TUTORIAL BRAD HAS EVER DONE! As someone who has watched a Traversy Media video, probably every single day snice 2019, I feel like this is the best video I have seen yet. NEXT JS has to be the best framework out there. I'm amazed at how easy Next JS. It has the essentials out-of-the-box. Routing is so much better. Thanks so much Brad for putting this Crash Course together and putting out so much free content!!
I have just watched this video, I had never thought I would find a tutorial as helpful and straightforward as this. Thanks, Brad for your good work. Happy new year 2022.
One of the best training courses I have seen in my entire life. Very thorough and professional. I have seen it more than 10 times and every time I learn something new.
This is gold. No only these guys provide you with piping decisions that are hard to justify without an engineering background, but they also provides a static/SEO friendly pages that later can act as a single page application (can they?). I definitely see your API routing serving some data from MongoDB and it's amazing. 10/10
This video is a lifesaver for me. I recently got hired at a software agency company for doing next and sanity. Should mension this video is all you need to work with nextjs. You always have docs if you need extra.
I just finished this course and I want to thank you so much Brad for making this course very easy to understand. Before that I had zero understanding of Next.js and was confused about how pages and things working with Next.js but you make that easy now Brad. Thanks again!
Super amazing and even though the documentation was slightly different, I knew I had to make this work and finish this crash course. Key differences I encoutered - to create the app with js and not ts, select use typescript as no. Also use App Router as No so as to follow the tutorial as is
Loved the video a lot. Please make TypeScript tutorials as well and full stack application combining NEXTJS, TypeScript, React, Express, NODE, MONGO etc. that will be super fun and will be super informative. Thanks a lot Brad
Thank you for the course. Awesome. One little thing, I think (I could be wrong but it seems to be right) the links to favicons should go in in _document.js otherwise the browser will request favicon.ico multiple times. So if you have five different size favicons in addition to favicon.ico for different devices a browser that can use favicon.ico will try to fetch it six times (once for the actual favicon.ico and then five more times for each time there is a with a rel="icon", even if the file specified in the isn't favicon.ico). The other meta tags and the title tag can and should still go in Meta.js so that they can be changed if needed for individual pages, though charSet should probably go in _document.js as well since it's probably not going to need to be changed. The viewport meta tag can't go in document.js because it doesn't like it there so that should still go in Meta.js even though that one probably isn't going to need to be changed. Edit: It looks like charSet='utf-8' gets inserted anyway by default so if you include it it will end up in the twice.
Dude this content is great! There are some points in the walkthrough where I get lost on the logic, Id consider following along a similar video of yours where you go into much finer detail about each function. More specifically towards the end you speed up a lot, being new to react and next js I just had to pause often and think it through. Thanks for the epic content. Keep it up!
Thanks Brad for putting together such a great video! Crispy clear audio and well-explained concepts. I am just starting out with next.js and this is very helpful indeeed.
Thank you for the great course!! It really helped me coming up to speed for production!! Its a must watch course for every developer who is planning to build sites using React and NextJs.
Great job Brad! One minor suggestion. You can use find instead of filter to get the first matching item in the array. That way you don't have to grab the first item with [0].
The goat is in the house. Brad, you are such a valuable person in our lives and community. Thank you for everything you have given us all. You are truly an inspiration. See you again soon my friend!
Great video, coming from Vue and starting to picking up React more and more to help future job searches - this so far has been the most straightforward and useful Next tutorial I've seen for the basics. Thanks!
Amazing tutorial Brad!!!! 😊😊😊👍👍👍👏👏👏You're a true master!!! Sooo different from the rest of the other ones that just go over the same topics without actually showing how to use this in real application.
Hi Brad ! According to the document, there is no reason to fetch data from the Api inside the getStaticProps method! In fact, the api is used for use inside React components on the client side! Apart from that, it was a good tutorial. Thank you very much
thanks Brad, I'm converting a CRA app now to Next and your video gave me a great overview of how to work with next very confident things will work out here. Cheers!!!
As usual, great job, Brad. Thank you very much for this good intro to Next.js. Built a first practice project while working along with you. You are a constant source of great material. Thanks again and may you be blessed, sir.
Great video Brad! Thanks for taking the time to make this. If you're planning on doing another NextJS video, would it be possible for you to include stuff using the Image tag and styled components? (Some stuff showing dynamic styled component changes (and how images linked from CSS are affected - like 'backgroundImage' would be awesome))
I spoke about this with my manager last day about switching to this. I'm excited about the technology. We use WordPress at the moment, and will switch to headless.
Thank you so much for this. As someone looking to get into Next fast this was just perfect! Going to watch your new one regarding Next 13 as well now. Thanks a ton for your work!
Good work Brad, very helpful. As of 1 Aug 2022: Got the error below. ./components/ArticleList.js 8:13 Error: Missing "key" prop for element in iterator react/jsx-key Solution: Add the key attribute. Probably a new ESLint rule after the video was recorded.
Awesome Brad. I can't thank you enough for this Next JS video. I am learning a lot from you. I have a client that needs a website and I will build it with Next JS and Chakra UI. :) Thanks for the video Brad. More power to you and God bless you!
You could do : let article = articles.find(e => e.id === id); Use find instead of filter to just find the first element matching the id instead of filter that returns an array (most used to delete an element and map for updating one).
Thanks, as always. I started with this one to get my feet wet. before moving on to your Next v13 video, and am looking forward to seeing what's changed.
I really appreciate this video thanks so much I am currently working on my sass appllication and this is such amazing since I am really confortable using react. this was literally fast and quit but It took me 6 hours to really understand all the contents.
I cannot thank you enough Brad!
as a man from a deprived community and a poor country in Africa you have empowered me greatly with your content on this channel now, I am full-stack working for myself only from watching your videos. you're a blessing to the world!
wish you all the best Mr Blossom. May all your dreams come true
Me too Brad is awesome ,can't thank enough...Im still learning, Once i get a job Im gonna repay him and keep learning
Mr. Blossom you're the one who is a blessing to the world.
can someone tell me if its possible to put your image in the api ? because i tried and it responds ' failed to parse source '...'
thanks !
Brad - th-cam.com/video/Tdk9E0xB0CA/w-d-xo.html
Hey Brad, anytime you feel sad (hopefully never),
just know that thousands of people absolutely love you man.
Brad you will always be the most helpful webdev youtuber I've ever encountered. Started watching your tutorials when I was in first year of my computer science degree at my university's cafe and now I'm preparing for my 3rd internship this summer and then graduation in December. You've played an important role in me learning web development. Thank you!
Net ninja releases NextJs series
Brad: let's do it.
Ninja: yooo
Love em both ❤️
Same... :) They are both awesome...
It always happens like that lol Shaun is great. It's just more good content for people to watch on the subject :)
@@TraversyMedia just finished Shaun tuto, and now I'm starting yours :) You are both amazing! thanks for everything :)
The funny thing is that both courses are really the same, so, who's copying who?
Absolutely insane how you provide so much value. Best Next tutorial I have seen. Enough for me to go out and start building. Brad, your appreciated!
master Brad yes sir! styled components crash course sounds great
@Chris Jon lol troll1
@Ismael Lincoln lol troll2
@@eatrejosm Brad Just Dropped Styled Components Crash Course.
Hi Brad! Thanks for the great tutorial!
Just a little bit of errata: @39:55 when you mapped out the Article list into the grid as cards, each of the card needs a unique id.
The simple fix is to add the key={article.id} as a prop:
The 'as' prop in the Link component in no longer required, you can pass it directly to the 'href' prop:
I realized that while reading this lol Oh well. Thanks for the heads up
Perfect. So for this component it is and it works
Top Effect th-cam.com/video/V4Aq9yGWpA4/w-d-xo.html :)....
THIS IS THE BEST TUTORIAL BRAD HAS EVER DONE! As someone who has watched a Traversy Media video, probably every single day snice 2019, I feel like this is the best video I have seen yet. NEXT JS has to be the best framework out there. I'm amazed at how easy Next JS. It has the essentials out-of-the-box. Routing is so much better. Thanks so much Brad for putting this Crash Course together and putting out so much free content!!
I have just watched this video, I had never thought I would find a tutorial as helpful and straightforward as this. Thanks, Brad for your good work. Happy new year 2022.
These crash courses are some of the best engineering education in existance. Absolutely incredible.
Great job, Brad! You got me started on node 5 years ago, still coming up with the goods! Thank you.
Man you saved my life with this video. Explained literally all my questions. Thank you so much!
One of the best training courses I have seen in my entire life. Very thorough and professional. I have seen it more than 10 times and every time I learn something new.
This is gold. No only these guys provide you with piping decisions that are hard to justify without an engineering background, but they also provides a static/SEO friendly pages that later can act as a single page application (can they?). I definitely see your API routing serving some data from MongoDB and it's amazing. 10/10
Man, 12 hours after your upload I got requested to learn and use Next Js in my evaluation. Thank you so much!
This video is a lifesaver for me. I recently got hired at a software agency company for doing next and sanity. Should mension this video is all you need to work with nextjs. You always have docs if you need extra.
Welcome, Brad. I'm happy that you're back again to give us tutorials ❤️
yes
This tutorial is a gem! I had watched 2 tutorials on NextJS before but this is the BEST! Thank you so much for the detailed explanation!
This is incredible. If you know React, at the end of this course you can confidently jump straight into developing Next JS Apps. Thanks Brad!
I just finished this course and I want to thank you so much Brad for making this course very easy to understand. Before that I had zero understanding of Next.js and was confused about how pages and things working with Next.js but you make that easy now Brad. Thanks again!
Is this course up-to-date in 2024
The absolute go-to channel for learning about new full-stack technologies and frameworks. You did it again, thank you!
Just finished this short course, and I want to thank you Brad, for this kind of free and well-explained resource
so nice to see you feeling better and back in action doing some of your own videos. Thank you!
Amazing crash course, I learnt all the fundamentals of Nextjs in just one hour. Definitely recommending.
Top Effect th-cam.com/video/V4Aq9yGWpA4/w-d-xo.html :)....
Super amazing and even though the documentation was slightly different, I knew I had to make this work and finish this crash course. Key differences I encoutered
- to create the app with js and not ts, select use typescript as no. Also use App Router as No so as to follow the tutorial as is
Holly shit watched the old one literally yesterday, and was deliberately looking for it. Thanks Brad. Keep the great work going on.
Loved the video a lot. Please make TypeScript tutorials as well and full stack application combining NEXTJS, TypeScript, React, Express, NODE, MONGO etc. that will be super fun and will be super informative. Thanks a lot Brad
th-cam.com/play/PLMhAeHCz8S38HfrRtzfzFD5NTbjgQxcpD.html
here is the tutorial you are lookin for
This is one of my technologies as well, I build my site with NextJs too. Thank you for bringing this tutorial🙏
Extremely well done. Covers key functionality in a straight and hands-on fashion. Use every second of the video to its best.
Thank you for the course. Awesome. One little thing, I think (I could be wrong but it seems to be right) the links to favicons should go in in _document.js otherwise the browser will request favicon.ico multiple times. So if you have five different size favicons in addition to favicon.ico for different devices a browser that can use favicon.ico will try to fetch it six times (once for the actual favicon.ico and then five more times for each time there is a with a rel="icon", even if the file specified in the isn't favicon.ico). The other meta tags and the title tag can and should still go in Meta.js so that they can be changed if needed for individual pages, though charSet should probably go in _document.js as well since it's probably not going to need to be changed. The viewport meta tag can't go in document.js because it doesn't like it there so that should still go in Meta.js even though that one probably isn't going to need to be changed.
Edit: It looks like charSet='utf-8' gets inserted anyway by default so if you include it it will end up in the twice.
Dude this content is great! There are some points in the walkthrough where I get lost on the logic, Id consider following along a similar video of yours where you go into much finer detail about each function. More specifically towards the end you speed up a lot, being new to react and next js I just had to pause often and think it through. Thanks for the epic content. Keep it up!
Watching your React.js Crash Course and Next.js Crash Course back-to-back. Man, keep up the good work! God bless you 🙏🏽
Same here bro, getting my web dev skills up to date
Thanks Brad for putting together such a great video! Crispy clear audio and well-explained concepts.
I am just starting out with next.js and this is very helpful indeeed.
Thank you for the great course!! It really helped me coming up to speed for production!! Its a must watch course for every developer who is planning to build sites using React and NextJs.
Great job Brad! One minor suggestion. You can use find instead of filter to get the first matching item in the array. That way you don't have to grab the first item with [0].
No fillers, just straight-up knowledge!
Let's goo brad uploading a video on NEXT JS. I'm sure as hell gonna watch it on my weekend tomorrow. Thanks alot brad. We couldn't appreciate more 🙌
Really great tutorial! I just started a new job where they use Next extensively and this got me up to speed pretty fast. Much appreciated!
Picking up Next.js become easy after watching this video! Great tutorial
The goat is in the house. Brad, you are such a valuable person in our lives and community. Thank you for everything you have given us all. You are truly an inspiration. See you again soon my friend!
I finally understood all the rendering techniques just through this video, thank you so much brad, Next is such a beautiful language
Great video, coming from Vue and starting to picking up React more and more to help future job searches - this so far has been the most straightforward and useful Next tutorial I've seen for the basics. Thanks!
Amazing tutorial Brad!!!! 😊😊😊👍👍👍👏👏👏You're a true master!!! Sooo different from the rest of the other ones that just go over the same topics without actually showing how to use this in real application.
Hands down the best Next.js quick tutorial ever produced. Super clear, easy to follow, top quality ✨
One of the best coding tutorials on the internet
Hi Brad
!
According to the document, there is no reason to fetch data from the Api inside the getStaticProps method! In fact, the api is used for use inside React components on the client side!
Apart from that, it was a good tutorial. Thank you very much
thanks Brad, I'm converting a CRA app now to Next and your video gave me a great overview of how to work with next very confident things will work out here. Cheers!!!
The timing couldn't have been better! Thank you, Brad Sir!
Man, you are brilliant! Just bought two of your courses. Keep up the good work!
This brought me up-to-speed in ~one hour. Thanks, Brad.
As usual, great job, Brad. Thank you very much for this good intro to Next.js. Built a first practice project while working along with you. You are a constant source of great material. Thanks again and may you be blessed, sir.
Great video Brad! Thanks for taking the time to make this.
If you're planning on doing another NextJS video, would it be possible for you to include stuff using the Image tag and styled components?
(Some stuff showing dynamic styled component changes (and how images linked from CSS are affected - like 'backgroundImage' would be awesome))
What a great crash course covered so much! Now I can work with Next JS, Thanks, Brad!
I was just looking Next.js crash course and here it comes. Thnx a lot Traversy Media
Thank you for covering so many next js topics in one video!, and this is exactly what I'm looking for!
I spoke about this with my manager last day about switching to this. I'm excited about the technology. We use WordPress at the moment, and will switch to headless.
51:59 - Omit the -s in the serve command if you want to test individual pages by typing the URL. It redirects to the top page otherwise.
Wanted to learn Nextjs and came to this video, I know Brad never fails me. Thanks!
Top Effect th-cam.com/video/V4Aq9yGWpA4/w-d-xo.html :)....
Great tutorial, many stuff covered 🔥 Prisma and SWR-Authentication the other crucial items to checkout. Thank you Brad for this refresher.
Brad and Shaun are on fire with all these awesome tutorials 🔥
I'm watching both of them just because...
I will use this in my “NEXT” project!
*Ba Dum Tss*
wow very clever
Wow
I see what you did there
You will use NextJS in Next Project
This deserves a save for referencing. Good job explaining Next.JS
Thanks Brad for this course. It's was short, but covered the most imporant parts of Next.js
Thank you so much for this. As someone looking to get into Next fast this was just perfect! Going to watch your new one regarding Next 13 as well now. Thanks a ton for your work!
Just what I needed to solve some issues over the weekend. Thanks. Subscribed in a heartbeat.
Covering basically all I wanted in one video. Great stuff.
This was great - thanks so much! Just came from doing your react front to back course and was the perfect segway to learning NextJS
Thank you so much for this tutorial. I love how you take the time to explain and break down the differences between CRA and Next.js
Top Effect th-cam.com/video/V4Aq9yGWpA4/w-d-xo.html :)....
Good work Brad, very helpful.
As of 1 Aug 2022: Got the error below.
./components/ArticleList.js
8:13 Error: Missing "key" prop for element in iterator react/jsx-key
Solution: Add the key attribute.
Probably a new ESLint rule after the video was recorded.
This is so awesome! Nice work! Can't wait to see the styled components crash course.
Another awesome course! looking forward for the next course where you were building a full project(s) from ground
up. Thx again!
Hi Brad. I love the way you showcase piece of techs that contribute to progress on our dev journey. Keep it up!!!
we can directly clone this repo and use the file structure for production, it's already the best practice, thanks, Brad
Nextjs is strict about file structure. So, this is how you gonna structure it no matter what.
@@whit3rose thanks for pointing that out
That Next.js api part alone makes the video a valuable watch for me.
My favorite part is 37:44 where you say "each specifical article" :'D
I was just start learning Nextjs from the *The Net Ninja* And you arrived with this tremendous course 😉
Thank you ❤
Superb tutor. Ideas, explanations flow seamlessly. No water. Thank you Brad!
Man this is so awesome. Thanks a lot! It helps me to understand the value that next js brings.
Just planning to learn NEXT.js and boom! your video comes 😊😊
Thanks for the great tutorial, switching over from Angular, this was a great one to get started back onto React world.
This is so insanely helpful and eye opening and really inspiring! Thank you so much for making this!!
I'm hoping for a Udemy course for Next JS in the near future cause I can't find any good course like the Brad's way of teaching
I would throw money at a Strapi / Next Udemy course. Seems like its going to be a very popular stack.
@@radlad7798 Maximilian has 1
Perfect timing! Welcome back Brad 👍
Thanks Brad, because of your teaching i have become a web developer
I was saving my time to react server component but I'm gonna learn both. Thanks Brad.
Thanks Brad for providing such a great tutorial on Next.JS for us! God bless you!
Awesome Brad. I can't thank you enough for this Next JS video. I am learning a lot from you.
I have a client that needs a website and I will build it with Next JS and Chakra UI. :) Thanks for the video Brad.
More power to you and God bless you!
Top Effect th-cam.com/video/V4Aq9yGWpA4/w-d-xo.html :)....
Great for the beginners :) Thanks Brad for this short video containing a lot of NextJS stuffs :)
Amazing Course, Easy to Follow with Brad. Thank you so much Brother 💖
Thank you! I initially learned React from your Udemy courses, and now, you have my back again when I to learn NextJs :p
Brad truly deserves a medal
Great walkthrough, Brad.
Feels like this is what React should have been all along.
You could do : let article = articles.find(e => e.id === id);
Use find instead of filter to just find the first element matching the id instead of filter that returns an array (most used to delete an element and map for updating one).
This was great. Super informative and really gave me what I need to know to start moving from react to next. Thanks man.
Read the docs but this helped me understand better. thanks Brad
Your videos are absolutely fascinating man ! Many great thanks Brad
Thanks, as always. I started with this one to get my feet wet. before moving on to your Next v13 video, and am looking forward to seeing what's changed.
So nice tutorial. I got 80 percent understanding in the first go...
I really appreciate this video
thanks so much
I am currently working on my sass appllication and this is such amazing since I am really confortable using react.
this was literally fast and quit but It took me 6 hours to really understand all the contents.
Helpline📲📥⬆️
Question can come in⬆️..