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:
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.
Next.js is extremely popular nowadays. I see lots of popular websites, media, services, web apps, startups, ..., you name it that were constructed with this awesome web framework. Absolutely must have to know to all self-respecting developer. And yeah, there're still bunch of cool programming languages, like recently released PHP 8, but c'mon, let's be honest, they are all yeasterday compare to JavaScript (Node.js), React and its ecosystem.
I don't know if I can agree with you about PHP being an yesterday language. And I wouldn't compare it with a front-end language. PHP is still the most widely used server-side language.
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!!
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
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
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].
Re: fetching data from API routes using getStaticProps I had a nightmare trying to deploy to Vercel. Got that painful unexpected token T at position 0 error. Eventually figured that it must be the be an error message beginning with There or The Tried a heap of different configs and env variables including Vercel_Url. But eventually found this: "Note: You should not use fetch() to call an API route in your application. Instead, directly import the API route and call its function yourself. You may need to slightly refactor your code for this approach. Fetching from an external API is fine!" nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation The and an example of what this means is here: import functionName from './api/functionName' //... export default async function getStatticProps() { const response = await functionName(); //... } github.com/vercel/next.js/issues/17834 I've been getting deeper into Next in the last few months. Next documentation is very good but this kind of high level 101 helps when I get in to the weeds. Great stuff, sir. Really appreciate what you do.
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 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.
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
If you are getting the error at build time 7:38 Error: Missing "key" prop for element in iterator react/jsx-key. change line 7 in components/ArticleList.js {articles.map(article =>
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!
Unfortunately as of July 2023 this is somewhat out of date in terms of how Next.js structures their initial app directory setup. Was still fun to follow along though! Great video as always.
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.
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).
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
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.
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.
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))
If you are deploying this app do change the url from the server to your vercel app url and remove the getStaticProps and getStaticPaths to getServerSideProps.
If you're watching this in 2023 or later. When creating a next app, don't use the app router if you're gonna follow this tutorial. That way you'll get kind of the same starting boilerplate.
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.
Brad, excellent content as always. I have a few questions. How does the function getServerSideProps inside the article component has access to the "context" parameter you are passing in to the function? Where does this function name (not definition) come from? Reassigning its definition like you just did sends it back to its original execution context or is it a completely different thing? Just some questions because I'm not sure if I understood completely how the execution context works in Next.JS, and I get a little bit lost when it comes to where information is coming from and where it is going to.
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!!!
Hello Brad, Thank you for the updated Nextjs Crash Course! I have noticed that you mentioned about you use Prisma as your ORM for creating a website. Will you please do a basic beginner Prisma Crash Course, like a REST API with CRUD functionality and PostgresSQL as the database. I'm still at the beginner stage so I really can't relate to any GraphQL and TypeScripts yet. Thank you :)
Thanks for the crash course Brad. I enjoyed the front end sections, but I'm not sure you've got the back end api section right. As it stands, 'npm run build' will fail because you are trying to call the back end api at build time when the server will not be running! The Nextjs back end api is intended to be called at run time, when the server is running.
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.
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!
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 - ua-cam.com/video/Tdk9E0xB0CA/v-deo.html
Hey Brad, anytime you feel sad (hopefully never),
just know that thousands of people absolutely love you man.
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 ua-cam.com/video/V4Aq9yGWpA4/v-deo.html :)....
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?
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
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.
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!
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!
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:
Great job, Brad! You got me started on node 5 years ago, still coming up with the goods! Thank you.
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.
Next.js is extremely popular nowadays. I see lots of popular websites, media, services, web apps, startups, ..., you name it that were constructed with this awesome web framework. Absolutely must have to know to all self-respecting developer. And yeah, there're still bunch of cool programming languages, like recently released PHP 8, but c'mon, let's be honest, they are all yeasterday compare to JavaScript (Node.js), React and its ecosystem.
Couldn't agree more 💯
I don't know if I can agree with you about PHP being an yesterday language. And I wouldn't compare it with a front-end language. PHP is still the most widely used server-side language.
@@VicodeMedia Agreed, and I quite like Laravel and it has been pretty up to today's standards...
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!!
Welcome, Brad. I'm happy that you're back again to give us tutorials ❤️
yes
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
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
ua-cam.com/play/PLMhAeHCz8S38HfrRtzfzFD5NTbjgQxcpD.html
here is the tutorial you are lookin for
These crash courses are some of the best engineering education in existance. Absolutely incredible.
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].
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.
My favorite part is 37:44 where you say "each specifical article" :'D
Re: fetching data from API routes using getStaticProps
I had a nightmare trying to deploy to Vercel. Got that painful unexpected token T at position 0 error. Eventually figured that it must be the be an error message beginning with There or The
Tried a heap of different configs and env variables including Vercel_Url. But eventually found this:
"Note: You should not use fetch() to call an API route in your application. Instead, directly import the API route and call its function yourself. You may need to slightly refactor your code for this approach.
Fetching from an external API is fine!"
nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation
The and an example of what this means is here:
import functionName from './api/functionName'
//...
export default async function getStatticProps() {
const response = await functionName();
//...
}
github.com/vercel/next.js/issues/17834
I've been getting deeper into Next in the last few months. Next documentation is very good but this kind of high level 101 helps when I get in to the weeds. Great stuff, sir. Really appreciate what you do.
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 incredible. If you know React, at the end of this course you can confidently jump straight into developing Next JS Apps. Thanks Brad!
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.
Holly shit watched the old one literally yesterday, and was deliberately looking for it. Thanks Brad. Keep the great work going on.
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
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
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!
Just finished this short course, and I want to thank you Brad, for this kind of free and well-explained resource
This is one of my technologies as well, I build my site with NextJs too. Thank you for bringing this tutorial🙏
If you are getting the error at build time 7:38 Error: Missing "key" prop for element in iterator react/jsx-key. change line 7 in components/ArticleList.js {articles.map(article =>
thanks for the info.
Man you saved my life with this video. Explained literally all my questions. Thank you so much!
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!
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 ua-cam.com/video/V4Aq9yGWpA4/v-deo.html :)....
Unfortunately as of July 2023 this is somewhat out of date in terms of how Next.js structures their initial app directory setup.
Was still fun to follow along though! Great video as always.
If anyone is confused with getStaticPaths and paths object, it isn't actually an object but an array of objects. It looks like paths:[{}, {}, {}].
Is it just me or does Brad sound like Heath Ledger's Joker? Quite an impressive voice!
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.
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
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).
I was saving my time to react server component but I'm gonna learn both. 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!
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 🙌
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
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.
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.
Thanks Brad for this course. It's was short, but covered the most imporant parts of Next.js
What a great crash course covered so much! Now I can work with Next JS, Thanks, Brad!
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
This brought me up-to-speed in ~one hour. Thanks, Brad.
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))
If you are deploying this app do change the url from the server to your vercel app url and remove the getStaticProps and getStaticPaths to getServerSideProps.
[
{
params: {
id: '1'
}
},
{
params: {
id: '2'
}
}
]
At 48:00 return array that looks like the above
The absolute go-to channel for learning about new full-stack technologies and frameworks. You did it again, thank you!
If you're watching this in 2023 or later. When creating a next app, don't use the app router if you're gonna follow this tutorial. That way you'll get kind of the same starting boilerplate.
Thanks a lot mate, that was truly life saving!
The timing couldn't have been better! Thank you, Brad Sir!
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.
54:38 indicates the coolest upcoming storm
Brad, excellent content as always. I have a few questions.
How does the function getServerSideProps inside the article component has access to the "context" parameter you are passing in to the function?
Where does this function name (not definition) come from? Reassigning its definition like you just did sends it back to its original execution context or is it a completely different thing?
Just some questions because I'm not sure if I understood completely how the execution context works in Next.JS, and I get a little bit lost when it comes to where information is coming from and where it is going to.
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!!!
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!
Great cash course if you are looking to get up to speed quickly or catch up on the latest version of Next.js!!
Extremely well done. Covers key functionality in a straight and hands-on fashion. Use every second of the video to its best.
Brad and Shaun are on fire with all these awesome tutorials 🔥
I'm watching both of them just because...
21:17 "Its not much, but it's honest work"
Please make a NextJS 13 Tutorial just like this.
Man, you are brilliant! Just bought two of your courses. Keep up the good work!
One of the best coding tutorials on the internet
Hello Brad, Thank you for the updated Nextjs Crash Course! I have noticed that you mentioned about you use Prisma as your ORM for creating a website. Will you please do a basic beginner Prisma Crash Course, like a REST API with CRUD functionality and PostgresSQL as the database. I'm still at the beginner stage so I really can't relate to any GraphQL and TypeScripts yet. Thank you :)
Thanks for the crash course Brad. I enjoyed the front end sections, but I'm not sure you've got the back end api section right.
As it stands, 'npm run build' will fail because you are trying to call the back end api at build time when the server will not be running! The Nextjs back end api is intended to be called at run time, when the server is running.
Hey mate, I'm trying to find a workaround any ideas?
Hey all,
at 57:34 instead of filter, we can use the find method, if we use find we do not have to do filtered[0] at 58:14
Awesome tutorial as always, Brad! What VSCode extension are you using to generate the React snippets? Thank you!
its called react snippets. He mentions it in his react crash course video ua-cam.com/video/w7ejDZ8SWv8/v-deo.html
Just what I needed to solve some issues over the weekend. Thanks. Subscribed in a heartbeat.
This is so insanely helpful and eye opening and really inspiring! Thank you so much for making this!!
Great tutorial, many stuff covered 🔥 Prisma and SWR-Authentication the other crucial items to checkout. Thank you Brad for this refresher.
Hey Brad. Awesome intro. What's the name of your vs code theme? Kinda like it
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.
Thank you for covering so many next js topics in one video!, and this is exactly what I'm looking for!
traversy media feels like home
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!
Brad do crash course for typescript 🙏
ua-cam.com/video/rAy_3SIqT-E/v-deo.html
@@vishsingh7235 ua-cam.com/video/IkOVe40Sy0U/v-deo.html
This deserves a save for referencing. Good job explaining Next.JS
This is so awesome! Nice work! Can't wait to see the styled components crash course.
I think it's not same things (48.30)
const paths=ids.map(id=>({params:{id:id.toString()}}) and
paths:{params:{id:'1',id:'2'}}
Another awesome course! looking forward for the next course where you were building a full project(s) from ground
up. Thx again!
This was awesome !!! Looking forward for the prisma video!! Thanks!!
Actually it's like that's the only missing thing in this video. He covered so many things. 🔥🔥🔥
Thanks for the great tutorial, switching over from Angular, this was a great one to get started back onto React world.
I was hoping you would do a new updated course on Next JS. Cant wait to digest all of this. Thanks!
I finally understood all the rendering techniques just through this video, thank you so much brad, Next is such a beautiful language
Gatsby is pain in arse, this is simple and easy,😎
Picking up Next.js become easy after watching this video! Great tutorial
Thanks Brad, because of your teaching i have become a web developer
I was just looking Next.js crash course and here it comes. Thnx a lot Traversy Media
Amazing Course, Easy to Follow with Brad. Thank you so much Brother 💖
Covering basically all I wanted in one video. Great stuff.
That Next.js api part alone makes the video a valuable watch for me.