Next.js Crash Course

In this video we will look at the fundamentals of Next.js such as SSR & SSG, routing, data fetching, apis and more
Code:
github.com/bradtraversy/next-...
Next.js Udemy Course:
www.udemy.com/course/nextjs-d...
💖 Support The Channel!
/ traversymedia
Next.js Website:
nextjs.org/
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!

[@kiranvysya]

wish you all the best Mr Blossom. May all your dreams come true

[@avatr7109]

Me too Brad is awesome ,can't thank enough...Im still learning, Once i get a job Im gonna repay him and keep learning

[@ToddDunning]

Mr. Blossom you're the one who is a blessing to the world.

[@jojokman]

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 !

[@cykablyat4197]

Brad - kzbin.info/www/bejne/ipXOanhmradjeaM

[@alibarznji2000]

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

[@sarcasticdna]

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

[@andromadusnaruto1544]

Same... :) They are both awesome...

[@TraversyMedia]

It always happens like that lol Shaun is great. It's just more good content for people to watch on the subject :)

[@mickaelrichard7255]

@@TraversyMedia just finished Shaun tuto, and now I'm starting yours :) You are both amazing! thanks for everything :)

[@carchutogimenez8539]

The funny thing is that both courses are really the same, so, who's copying who?

[@Felipe-pb9gu]

The 'as' prop in the Link component in no longer required, you can pass it directly to the 'href' prop:

[@TraversyMedia]

I realized that while reading this lol Oh well. Thanks for the heads up

[@randomness2622]

Perfect. So for this component it is and it works

[@GamingTSH]

Top Effect kzbin.info/www/bejne/jGWkomyvfLyjd5Y :)....

[@muzoorabarnabas3461]

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.

[@khanf13]

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!

[@scotttct]

I will use this in my “NEXT” project!

[@nugo6082]

*Ba Dum Tss*

[@hojdog]

wow very clever

[@null_spacex]

Wow

[@catharsis222]

I see what you did there

[@Aalok464]

You will use NextJS in Next Project

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

[@foxscarlett4648]

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

[@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

[@jlambert12013]

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

[@sarvanikandukuri7800]

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!

[@edgarsblog]

Just finished this short course, and I want to thank you Brad, for this kind of free and well-explained resource

[@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.

[@Mvrck44]

The absolute go-to channel for learning about new full-stack technologies and frameworks. You did it again, thank you!

[@brettconnolly399]

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!

[@yasseralexanderpalacios8504]

Extremely well done. Covers key functionality in a straight and hands-on fashion. Use every second of the video to its best.

[@gambit3904]

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

[@turbokev3772]

so nice to see you feeling better and back in action doing some of your own videos. Thank you!

[@jagpreetsingh5946]

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.

[@IbraheemAbuKaff]

Thank you for covering so many next js topics in one video!, and this is exactly what I'm looking for!

[@nathanrodrigues1924]

This was great - thanks so much! Just came from doing your react front to back course and was the perfect segway to learning NextJS

[@sony4481]

What a great crash course covered so much! Now I can work with Next JS, Thanks, Brad!

[@johnnya246]

Man, you are brilliant! Just bought two of your courses. Keep up the good work!

[@matrixRule127]

The timing couldn't have been better! Thank you, Brad Sir!

[@cryptomastery2581]

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!

[@manishsharma9490]

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.

[@matthijndijkstra25]

Covering basically all I wanted in one video. Great stuff.

[@nickstaresinic9933]

This brought me up-to-speed in ~one hour. Thanks, Brad.

[@yahayaoyinkansola8258]

I finally understood all the rendering techniques just through this video, thank you so much brad, Next is such a beautiful language

[@theobreakspear3068]

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

[@wforbes87]

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!

[@somniumwave]

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

[@jignesh_at_manektech]

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!

[@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:

[@jaxreacts06]

This is so awesome! Nice work! Can't wait to see the styled components crash course.

[@bacon37460]

Thanks Brad for this course. It's was short, but covered the most imporant parts of Next.js

[@DentedCode]

This is one of my technologies as well, I build my site with NextJs too. Thank you for bringing this tutorial🙏

[@arnaudpoutieu1331]

Hi Brad. I love the way you showcase piece of techs that contribute to progress on our dev journey. Keep it up!!!

[@MarkusEicher70]

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.

[@MuhammadShahzad25784]

Thanks Brad for providing such a great tutorial on Next.JS for us! God bless you!

[@chrisfaux3769]

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!

[@eatrejosm]

master Brad yes sir! styled components crash course sounds great

[@eatrejosm]

@Chris Jon lol troll1

[@eatrejosm]

@Ismael Lincoln lol troll2

[@tapank415]

@@eatrejosm Brad Just Dropped Styled Components Crash Course.

[@techienomadiso8970]

Great tutorial, many stuff covered 🔥 Prisma and SWR-Authentication the other crucial items to checkout. Thank you Brad for this refresher.

[@daydreamical]

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!

[@elkhanhamet2561]

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.

[@hamzahayd6751]

I was just looking Next.js crash course and here it comes. Thnx a lot Traversy Media

[@marshallmurray8050]

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

[@GamingTSH]

Top Effect kzbin.info/www/bejne/jGWkomyvfLyjd5Y :)....

[@georgiosmylonas3892]

Man this is so awesome. Thanks a lot! It helps me to understand the value that next js brings.

[@GlennMartin]

Thanks for the great tutorial, switching over from Angular, this was a great one to get started back onto React world.

[@octopus_spirit]

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

[@tigranharutyunyan7674]

Superb tutor. Ideas, explanations flow seamlessly. No water. Thank you Brad!

[@PaulBrownclk-me]

Perfect timing! Welcome back Brad 👍

[@erwinb2]

Just what I needed to solve some issues over the weekend. Thanks. Subscribed in a heartbeat.

[@ahmaat19]

I was saving my time to react server component but I'm gonna learn both. Thanks Brad.

[@dannnnydannnn5201]

This was great. Super informative and really gave me what I need to know to start moving from react to next. Thanks man.

[@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.

[@alicodes22]

Couldn't agree more 💯

[@VicodeMedia]

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.

[@zinminoozinminoo1693]

@@VicodeMedia Agreed, and I quite like Laravel and it has been pretty up to today's standards...

[@HLS6935]

Thank you so much for covering the SEO aspects when using React.

[@bikramrawat3424]

Great for the beginners :) Thanks Brad for this short video containing a lot of NextJS stuffs :)

[@davialefe7646]

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

[@robertosoriano9617]

Thanks you so much Brad! I have benefited from your tutorials from several years.

[@zakaria5775]

Amazing Course, Easy to Follow with Brad. Thank you so much Brother 💖

[@rohitbhambhani4090]

Thank you Brad! Another great Crash course yet again!

[@Infernodia]

woah thanks for this one, I'm getting more into nextjs and having trouble implementing redux, I'll study this video.

[@OmarOnAWave]

Your videos are absolutely fascinating man ! Many great thanks Brad

[@barmannphoto]

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].

[@brunofilgueiras3518]

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

[@GlenCodes]

I was hoping you would do a new updated course on Next JS. Cant wait to digest all of this. Thanks!

[@iUmerFarooq]

I was just start learning Nextjs from the *The Net Ninja* And you arrived with this tremendous course 😉 Thank you ❤

[@jsdaniell]

Good tutorial, I'm very excited about Next.js, I literally fill my flipchart of annotations, thank you very much!!!!

[@SocksWithSandals]

Great walkthrough, Brad. Feels like this is what React should have been all along.

[@fluntimes]

That Next.js api part alone makes the video a valuable watch for me.

[@deepdivedevs100]

i am finally able to understand docs after this, thanks brad

[@BarryDocherty]

This deserves a save for referencing. Good job explaining Next.JS

[@korosensei1379]

Brad and Shaun are on fire with all these awesome tutorials 🔥 I'm watching both of them just because...

[@darius349]

IT COMES EXACTLY WHEN I NEED IT. THANK YOU, BRAD!!! YOU ARE SO AMAZING!!

[@AnanyaChadha]

This is so insanely helpful and eye opening and really inspiring! Thank you so much for making this!!

[@abrahamolaobaju2266]

Read the docs but this helped me understand better. thanks Brad

[@thehaptiK]

i appreciate that you posted this dawg

[@BodyAli96]

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

[@abdullahalakus9700]

yes

[@ashishchaturvedi3319]

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

[@samshrestha7101]

kzbin.info/aero/PLMhAeHCz8S38HfrRtzfzFD5NTbjgQxcpD here is the tutorial you are lookin for

[@1a906b]

Picking up Next.js become easy after watching this video! Great tutorial

[@giorgegege]

Good job! This is such an easy to understand guide. Keep at it!

[@rayc3103]

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.

[@maacpiash]

Watching your React.js Crash Course and Next.js Crash Course back-to-back. Man, keep up the good work! God bless you 🙏🏽

[@TheBoglodite]

Same here bro, getting my web dev skills up to date

[@pooriadadsetan9203]

Very helpful and minimalistic. Thank you Brad

[@shivamnarkar5047]

Just planning to learn NEXT.js and boom! your video comes 😊😊

[@jennatucker]

Exceptional content, as always, Brad! Thank you so much!

[@yitzchaksviridyuk932]

Amazing video and great intro to Next. Thanks a lot Brad.

[@TechBowl]

Awesome! Great Tutorial. Thanks, Brad💗

[@thetechdock]

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.

[@andyfifedenim]

Great video, as usual! I would love an e-commerce cart video, which has the ability to choose variants( size and color) etc.. I would like that.

[@ranjeet5806]

Wow brad you are such a great teacher. Thank you!

[@guymandude2774]

Thanks so much Brad, Great and straight to point as always!!

[@matiracedo]

This was awesome! More than useful, thank you!

[@donmikkodanm.olmillo8154]

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 :)

[@cromuelbarut9859]

finally!!! my most awaited video from Brad

[@yanivcode9724]

I like how you keep it simple. good practice.

[@sudarshankj]

Learnt a heck lot! Thank you for making this.

[@DavidFPozo]

No fillers, just straight-up knowledge!