Next.js Crash Course

Code:

💖 Support The Channel!

Timestamps:
0:00 - Intro & Slides
6:52 - Getting Setup with create-next-app
8:23 - Files & Folders
11:37 - Pages & Routing
13:14 - Head
16:05 - Layouts & CSS Modules
20:56 - Nav Component & Link
23:34 - Create a Header
25:05 - Styled JSX
27:46 - Custom Document
31:16 - Data Fetching
32:02 - getStaticProps()
33:58 - Showing Data
40:15 - Nested Routing
42:46 - getServerSideProps()
46:00 - getStaticPaths()
49:47 - Export a Static Website
53:18 - API Routes
59:24 - Using the API Data
1:03:48 - Custom Meta Component

[ibrahimkconteh]

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!

[alibarznji]

Hey Brad, anytime you feel sad (hopefully never),
just know that thousands of people absolutely love you man.

[Felipe-pbgu]

The 'as' prop in the Link component in no longer required, you can pass it directly to the 'href' prop: <Link href={`/path/${id}`}>

[sarcasticdna]

Net ninja releases NextJs series
Brad: let's do it.
Ninja: yooo
Love em both ❤️

[eatrejosm]

master Brad yes sir! styled components crash course sounds great

[khanf]

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!

[MrDuah]

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!

[muzoorabarnabas]

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.

[eveypea]

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: <ArticleItem article={article} key={article.id} />

[foxscarlett]

Great job, Brad! You got me started on node 5 years ago, still coming up with the goods! Thank you.

[jlambert]

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

[theobreakspear]

These crash courses are some of the best engineering education in existance. Absolutely incredible.

[BodyAli]

Welcome, Brad. I'm happy that you're back again to give us tutorials ❤️

[ITentrepreneur]

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.

[arash.pourrahim]

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.

[davialefe]

Holly shit watched the old one literally yesterday, and was deliberately looking for it. Thanks Brad. Keep the great work going on.

[justinasbei]

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

[sarvanikandukuri]

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!

[somniumwave]

Man you saved my life with this video. Explained literally all my questions. Thank you so much!

[gambit]

Man, 12 hours after your upload I got requested to learn and use Next Js in my evaluation. Thank you so much!