Next.js Crash Course

Подписаться 2,2 млн

Просмотров 795 тыс.

50% 1

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

Наука

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 746

@ibrahimkconteh 3 года назад

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 3 года назад

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

@avatr7109 3 года назад

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 3 года назад

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

@jojokman 2 года назад

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 2 года назад

Brad - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Tdk9E0xB0CA.html

@alibarznji2000 3 года назад

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

@sarcasticdna 3 года назад

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

@andromadusnaruto1544 3 года назад

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

@TraversyMedia 3 года назад

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

@mickaelrichard7255 3 года назад

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

@carchutogimenez8539 2 года назад

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

@Felipe-pb9gu 3 года назад

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

@TraversyMedia 3 года назад

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

@randomness2622 3 года назад

Perfect. So for this component it is and it works

@GamingTSH 2 года назад

Top Effect ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-V4Aq9yGWpA4.html :)....

@scotttct 3 года назад

I will use this in my “NEXT” project!

@nugo6082 2 года назад

*Ba Dum Tss*

@hojdog 2 года назад

wow very clever

@null_spacex 2 года назад

Wow

@catharsis222 2 года назад

I see what you did there

@Aalok464 2 года назад

You will use NextJS in Next Project

@ITentrepreneur 3 года назад

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 3 года назад

Couldn't agree more 💯

@VicodeMedia 3 года назад

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 3 года назад

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

@muzoorabarnabas3461 2 года назад

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.

@MrDuah 3 года назад

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!

@khanf13 2 года назад

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!

@foxscarlett4648 3 года назад

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

@eatrejosm 3 года назад

master Brad yes sir! styled components crash course sounds great

@eatrejosm 3 года назад

@Chris Jon lol troll1

@eatrejosm 3 года назад

@Ismael Lincoln lol troll2

@tapank415 2 года назад

@@eatrejosm Brad Just Dropped Styled Components Crash Course.

@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 2 года назад

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!

@justinasbei 3 года назад

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

@arash.pourrahim 11 месяцев назад

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.

@edgarsblog Год назад

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

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

@yasseralexanderpalacios8504 2 года назад

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

@brettconnolly399 2 года назад

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!

@gambit3904 3 года назад

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

@Mvrck44 Год назад

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

@jagpreetsingh5946 3 года назад

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.

@somniumwave 2 года назад

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

@cryptomastery2581 2 года назад

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!

@turbokev3772 3 года назад

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

@DentedCode 3 года назад

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

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

@nathanrodrigues1924 2 года назад

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

@yahayaoyinkansola8258 Год назад

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

@johnnya246 3 года назад

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

@IbraheemAbuKaff 3 года назад

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

@manishsharma9490 2 года назад

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.

@nickstaresinic9933 3 года назад

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

@matrixRule127 3 года назад

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

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

@theobreakspear3068 Год назад

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

@sony4481 3 года назад

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

@matthijndijkstra25 3 года назад

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

@bacon37460 3 года назад

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

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

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

@thetechdock 3 года назад

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.

@tigranharutyunyan7674 Год назад

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

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

@jaxreacts06 3 года назад

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

@techienomadiso8970 2 года назад

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!

@erwinb2 Год назад

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

@arnaudpoutieu1331 3 года назад

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

@marshallmurray8050 3 года назад

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 2 года назад

Top Effect ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-V4Aq9yGWpA4.html :)....

@hamzahayd6751 3 года назад

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

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

@1a906b Год назад

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

@GlennMartin 2 года назад

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

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

@MuhammadShahzad25784 2 года назад

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

@HLS6935 Год назад

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

@AnanyaChadha 9 месяцев назад

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

@censura1210 8 месяцев назад

Hands down the best Next.js quick tutorial ever produced. Super clear, easy to follow, top quality ✨

@iUmerFarooq 3 года назад

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

@bikramrawat3424 2 года назад

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

@PaulBrownclk-me 3 года назад

Perfect timing! Welcome back Brad 👍

@georgiosmylonas3892 2 года назад

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

@rayc3103 3 года назад

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.

@dannnnydannnn5201 Год назад

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

@OmarOnAWave 2 года назад

Your videos are absolutely fascinating man ! Many great thanks Brad

@shivamnarkar5047 3 года назад

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

@BarryDocherty 2 года назад

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

@DavidFPozo Год назад

No fillers, just straight-up knowledge!

@jsdaniell 3 года назад

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

@robertosoriano9617 3 года назад

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

@abrahamolaobaju2266 3 года назад

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

@SivakD 2 года назад

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.

@barmannphoto 2 года назад

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

@ahmaat19 3 года назад

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

@davialefe7646 3 года назад

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

@zakaria5775 2 года назад

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

@Infernodia 3 года назад

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

@BodyAli96 3 года назад

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

@abdullahalakus9700 3 года назад

yes

@SocksWithSandals 2 года назад

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

@pooriadadsetan9203 2 года назад

Very helpful and minimalistic. Thank you Brad

@ashishchaturvedi3319 3 года назад

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 2 года назад

ru-vid.com/group/PLMhAeHCz8S38HfrRtzfzFD5NTbjgQxcpD here is the tutorial you are lookin for

@rohitbhambhani4090 3 года назад

Thank you Brad! Another great Crash course yet again!

@GlenCodes 3 года назад

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

@darius349 3 года назад

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

@paulhitchmough 2 года назад

My favorite part is 37:44 where you say "each specifical article" :'D

@shankarmishra426 3 года назад

So nice tutorial. I got 80 percent understanding in the first go...

@maacpiash 3 года назад

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

@TheBoglodite 2 года назад

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

@korosensei1379 3 года назад

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

@giorgegege Год назад

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

@viktrix1504 2 года назад

Amazing crash course, I learnt all the fundamentals of Nextjs in just one hour. Definitely recommending.

@GamingTSH 2 года назад

Top Effect ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-V4Aq9yGWpA4.html :)....

@deepdivedevs100 3 года назад

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

@aliabdi9510 3 года назад

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

@andyfifedenim 3 года назад

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.

@jennatucker Год назад

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

@yitzchaksviridyuk932 3 года назад

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

@fluntimes 3 года назад

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

@yanivcode9724 2 года назад

I like how you keep it simple. good practice.

@BeginningProgrammer 2 года назад

Really enjoyed this video. I now have a good understanding of next js and how server side rendering works with react. Thanks for sharing so much man. Great video. What would be the best use cases for server side rendering?

@calvincrane 3 года назад

Thank you for uploading this KUDOS! It's a great tutorial. I started with this then diverted to import some wordpress content on a site I have via graphQL and it all works. The thing I notice is that I can see how to say load a getServerSideProps, from word press per page works well, but that data is only available to that page. I may be mis using the tool in some ways when I should build a react SPA instead. This is a website generator after all.