NextJS 13 Tutorial - Routing, Data Fetching, Server Components...

Ғылым және технология

NextJS 13 came with a lot of new changes, so I wanted to make this video explaining what is up with the new update.
Join our Discord: / discord
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
🐙 GraphQL Course: codedamn.com/learn/graphql-fo...
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Linkedin: / machadop1407
Instagram: / pedro.fmachado_
Github: github.com/machadop1407
Business Email: pedro@pedrotech.co
🌟 Gear / Hardware I Use and Recommend 🌟
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 amzn.to/42kqFuM 💻 Monitor
🖱️amzn.to/3C0ZhHb 🖱️ Mouse
📷 amzn.to/3OHJvbM 📷 My Camera
🎤 amzn.to/3oxSthj 🎤 My Microphone
⌨️ amzn.to/3oFPpj1 ⌨️ My Microphone
⚡ amzn.to/3MYMnzM ⚡ LED Lights In the Background
Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial
NEST 13 CHANGES - MARKERS
00:00 | Intro
00:59 | Create a NextJS App
02:48 | TurboPack
04:52 | Folder Structure
05:31 | Routing
10:57 | Layouts
14:07 | Change with Fetching Data
32:24 | Server vs. Client Components
#reactjs #coding

Пікірлер: 171

  • @sanjeevanibhandari5652
    @sanjeevanibhandari5652 Жыл бұрын

    The way you make topics effortlessly clear and make everything understandable is truly remarkable.

  • @luniacllama8373
    @luniacllama8373 Жыл бұрын

    found your channel less than a week ago and honestly the only thought I have right now - WHY DIDNT I KNOW YOU BEFORE , lovin the content ! thank you and please keep helping me master full stack dev!

  • @georgeolufemi4285

    @georgeolufemi4285

    Жыл бұрын

    😂

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    Hahahaha really happy you like my videos :)

  • @mohammadidris4481
    @mohammadidris448110 ай бұрын

    I have watched several tutorials on KZread about NextJS 13 but no one is more explanatory likes your, ban't wait for the full beginners course. Thank you so much for doing this

  • @dhruvshah8310
    @dhruvshah8310 Жыл бұрын

    Wonderful video! Thank you so much for the quick course highlighting the changes, it had been very confusing for me since a long time, but now it's easier to go through the docs and get everything cleared!

  • @eshw23
    @eshw23 Жыл бұрын

    Amazing much needed video, another thing that blew my mind is, you can develop a really complex app with Nextjs and simply deploy it to Vercel with one click. Usually deploying a React front end, and an Express backend(or any backend framework) is such a painful process.

  • @Jawa332
    @Jawa33210 ай бұрын

    Thanks man, your videos really help me understand stuff. it feels like you manage to simplify stuff and make them approchable! keep up

  • @user-zk4uv4jh3k
    @user-zk4uv4jh3k11 ай бұрын

    This is so good. I'm sorry for the others but honestly thanks to all of your efforts but it gets boring unlike this one. Very direct to the point. I hope you'll have more of this and specifically dealing with database like CRUD operations. I'm looking forward to learn so much from this.

  • @johnedwardubalde3433
    @johnedwardubalde34338 ай бұрын

    Thanks for this! I've been scratching my head numerous times just to understand data fetching in NextJS. This is really helpful~

  • @anthonygesora2517
    @anthonygesora2517 Жыл бұрын

    I love your approach it has opened out precious concepts when i was a beginner upto now in my intermediade fullstack development 💪🏾💪🏾💪🏾💪🏾

  • @unhandledexception1948
    @unhandledexception19488 ай бұрын

    I find it remarkable is how you have accumulated such deep knowledge of front end development at such a young age :-) great content.

  • @k303k
    @k303k Жыл бұрын

    Thank you so much Pedro! This is exactly what we needed!!!

  • @eternalmisunderstood6342
    @eternalmisunderstood6342 Жыл бұрын

    20:21 It actually shows up in the console. Not browser console but in node console in VSC because it's a server-side component. Thanks you a lot.

  • @shaked1233
    @shaked1233 Жыл бұрын

    Super helpful video, everything is clear and concise. you deserve more subs

  • @pouyabh
    @pouyabh11 ай бұрын

    Thanks a lot for explaining all aspects of routing too specially the dynamic part

  • @user-Chinchu_Ori
    @user-Chinchu_Ori Жыл бұрын

    Thanks for all the meaningful information, i was in need for this kind of explanation !!!

  • @ryujin2206
    @ryujin22069 ай бұрын

    bro how is it you make learning this shit so fucking easy, its so crazy. I wish all my CS professors were like you bro, straight up and I mean that shit from the bottom of my heart. You got a talent for teaching.

  • @MuneebR7
    @MuneebR7 Жыл бұрын

    You make it so easy to understand everything .

  • @Hassanrafique198
    @Hassanrafique1988 ай бұрын

    Clear and Concise tutorial. Thanks!

  • @mohammadpartovi1813
    @mohammadpartovi181310 ай бұрын

    Fantastic tutorial. Thanks for sharing your knowledge.

  • @muhfadhil5681
    @muhfadhil5681 Жыл бұрын

    always waiting for ur update in next js videos bro, cant wait for the course

  • @nzubeokere3718
    @nzubeokere3718 Жыл бұрын

    Great job. Hopefully you can find to to create a project with it, your viewers would love it.

  • @albertoiong6895
    @albertoiong6895 Жыл бұрын

    Many thanks to your video, please keep on teaching us...

  • @lscodeschool957
    @lscodeschool95710 ай бұрын

    Thank you Pedro, this was amazingly clear

  • @luizinhogm
    @luizinhogm Жыл бұрын

    Bro, thanks a lot for this kind of knowledge! You're amazing!!

  • @xGalasko
    @xGalasko8 ай бұрын

    Fantastic video very concise and great communication. Thank you.

  • @Codewith0xConcept
    @Codewith0xConcept10 ай бұрын

    Great content. I like the way you explained everything ❤🎉

  • @lukas.webdev
    @lukas.webdev Жыл бұрын

    Great Video! Thanks for sharing. Keep it up! 😉🔥

  • @tenr01
    @tenr0110 ай бұрын

    19:00 starts focusing on the topic of fetching data of numerous endpoints of this Json place holder API. Soooo amazing to see!! I love Next 13

  • @parthivsolanki21
    @parthivsolanki21 Жыл бұрын

    One thing i want to said that , I'm currently learning react nd it's libraries nd other technologies , nd you don't believe that i got suggestion of your video and now I subscribed you and watching your golden content.. Osm explaination 👌👌💥💥

  • @walterjorgemazzoni
    @walterjorgemazzoni Жыл бұрын

    great video, thanks. Usually when you fetch data, end user selects filters, search strings, sort orders, etc. etc. Those components have to be on a client-side in order to work and be able to capture those events. How do you call the fetch (in a server-side component) with the client filters ? Thanks

  • @Meshv_patel
    @Meshv_patel6 ай бұрын

    I got your suggestion from my friend that saw all react hooks and I saw that video as well.. Really, your content of video is amazing... Thanks for doing this great things 👍 keep doing...

  • @Igor-nd3nf
    @Igor-nd3nf11 ай бұрын

    Tutorial é tão bom que mesmo eu não sabendo inglês, consegui entender

  • @sadique_x_
    @sadique_x_11 ай бұрын

    i dont think the guy cut the video to read the script... likeeeee. i fully understood every second of what he taught. thanks man!!!

  • @sonamohialdin3376
    @sonamohialdin33769 ай бұрын

    Very helpful and understandable tutorial thank you

  • @Andrewheinx
    @Andrewheinx Жыл бұрын

    Super clean explanation. Keep it up brother

  • @lovepreetSingh-rx4vz
    @lovepreetSingh-rx4vz5 ай бұрын

    You are unbelievable brother, you dont know how easy you can make the things other youtuber i dont know why they make fking 5 hours long video for nothing, you are really doing good job 👍 and you

  • @serveshchaturvedi2034
    @serveshchaturvedi2034 Жыл бұрын

    Great video Pedro! A small query, why does the footer not appear at 13:52 on home page, but navbar does..? Keep up the awesome work:)

  • @paulocesarabudfilho5309
    @paulocesarabudfilho5309 Жыл бұрын

    Oh my god I was LOOKING FOR THIS 😍

  • @pinkimandal6842
    @pinkimandal68425 ай бұрын

    your teaching way is good and understandable.

  • @derarageremu
    @derarageremu11 ай бұрын

    thnks a lot. i haven't word for you keep going bro!!!

  • @appstuff6565
    @appstuff65658 ай бұрын

    Thank you for this Pedro. Loved the explanation esapecially the before and after 13 with app routing and the server & client components.

  • @buddhalama4041
    @buddhalama40419 ай бұрын

    I learned so much from this video. Thank you man.

  • @user-wk7vb6kg1f
    @user-wk7vb6kg1f Жыл бұрын

    From Bangladesh, Your teaching really awesome.Thank you so much

  • @rvileladesigner-renan8694
    @rvileladesigner-renan8694 Жыл бұрын

    Great video bro, bro! Thank you

  • @waifucodes
    @waifucodes9 ай бұрын

    thank u Pedro! i love your tutorials

  • @totfosk
    @totfosk9 ай бұрын

    i am wondering how the hell can the other KZreadrs mess it up so much that this is the first tutorial in which I understand what you are doing all the time (and I have extensive experience already with React). You are good man thanks!!!!!

  • @PedroTechnologies

    @PedroTechnologies

    9 ай бұрын

    Glad I could help!

  • @kashmirtechtv2948
    @kashmirtechtv294811 ай бұрын

    The best... Create more videos like this on more practical topics that we should learn if we are jumping from React to Next JS.... Infact, make a Playlist of that (React to Next Js😊)

  • @Nanashi-rq7lk
    @Nanashi-rq7lk Жыл бұрын

    Thanks for the nice tutorial. I learned a lot.

  • @vaibhavkumar8140
    @vaibhavkumar8140 Жыл бұрын

    This was the video I was waiting for on Next Js :) I started learning React from your channel and now I am making good progress in Next too, but I wasn't fully aware of the recent update on the next js, I still have some slight doubts, like if I have a server component/page and I have to add a button on it how will I do that?? Can I create a button in the components folder and make it a client component and add all my logic like hooks and event calls, and then import it into the server component? Will this work?? (P.S I love the effort you make in creating all these valuable videos, just wanted to tell you if you can make your course affordable for everyone it would be a nice help :) )

  • @coderite_
    @coderite_ Жыл бұрын

    Thanks a lot Pedro. This is awesome

  • @anthonygesora2517
    @anthonygesora2517 Жыл бұрын

    I love you bro... you've made me learn alot🎉🎉🎉🎉🎉🎉

  • @MayankKumar-yf6bw
    @MayankKumar-yf6bw10 ай бұрын

    Life saver video, Hats Off 🙌

  • @AlejandroRL868
    @AlejandroRL868 Жыл бұрын

    Hello brother, greetings from Cuba, so that you keep in mind, a complete nextjs video, data fetching, authentication and authorization with roles and whatever else you want to add, thanks for everything!

  • @legendaryfootball4222
    @legendaryfootball4222 Жыл бұрын

    I'have been waiting 😭😭❤

  • @gangaautomobiles3071
    @gangaautomobiles307111 ай бұрын

    awesome explanation.. thanks a lot

  • @tephrosisOfficial
    @tephrosisOfficial8 ай бұрын

    Thanks for the clear explanation! About the (static) fetching: The strange thing is that when I refreshed, I would get a different dog, wihout altering the code. Did they change the default caching?

  • @mohamedmmdoh5918
    @mohamedmmdoh59184 ай бұрын

    Great video pedro , but i have question why you removed the console in the 20:26 and replaced it with a list of Users instead ??

  • @affangavankar8848
    @affangavankar884810 ай бұрын

    Man this guy is wayyyyyy underated, TY very much for this tutiorial

  • @nepalrameshwor1540
    @nepalrameshwor154011 ай бұрын

    nice and clear explanation

  • @markus-linke
    @markus-linke8 ай бұрын

    Great video, thanks!

  • @erickeft
    @erickeft Жыл бұрын

    thanks a lot Pedro! 👊👊

  • @rfryanfavour4369
    @rfryanfavour4369 Жыл бұрын

    You deserve an award bro I fr 🎉

  • @hashira_d
    @hashira_d11 ай бұрын

    I am in love with your content ❤

  • @delkitonyi
    @delkitonyi11 ай бұрын

    You're always on point.

  • @edenkefale7129
    @edenkefale712910 ай бұрын

    Amazing! Thank You

  • @treksis
    @treksis Жыл бұрын

    crystal clear thank you

  • @replayzor
    @replayzor11 ай бұрын

    First of all nice job :). Second how can I make in vs/code to see the folders src/app ? Is that an extension or I need to config something ?

  • @ilhamsa01
    @ilhamsa0110 ай бұрын

    thanks great video, may i know how to use the state management such as react context in server side component?

  • @rashmany
    @rashmany5 ай бұрын

    I'm speechless, and not hesitate to subscribe to your Chanel

  • @alexpanteli3651
    @alexpanteli3651 Жыл бұрын

    Thanks for this tutorial

  • @mohammadtamaddon5694
    @mohammadtamaddon56948 ай бұрын

    great thank you Pedro😍😍😍😍😍

  • @ThiagoLucioBittencourt
    @ThiagoLucioBittencourt5 ай бұрын

    Rapaz fora da curva. Novinho e já saca muito do trampo tem excelente inglês. Tá nos 1% de verdade.

  • @AE-qj5xi
    @AE-qj5xi Жыл бұрын

    Thank you for the video. Nextjs 13 is kinda difficult for me

  • @PedroTechnologies

    @PedroTechnologies

    Жыл бұрын

    It becomes easier with time!

  • @ayoubnachat5920
    @ayoubnachat592011 ай бұрын

    love it, but you missed the API part 😅. what's vscode theme are you using!?

  • @caaltaga
    @caaltaga Жыл бұрын

    Thank you for this. I'm still learning and this has been really helpful. I'm a bit confused about something. Where do I create my components folder?? In source or in app, if I create it in app wouldn't next think it's a route? Or it won't happen now that you have to create a page.tsx file on it?

  • @walterjorgemazzoni

    @walterjorgemazzoni

    Жыл бұрын

    i create components folder at the same level than app

  • @RedXtremeHacker
    @RedXtremeHacker Жыл бұрын

    hi brother, nice video. Can you make a full stack website using nextjs, prisma, next-auth, postgress, tailwind, typescript. i mean using all the famous technologies that are being used.

  • @mengfandy7365
    @mengfandy736511 ай бұрын

    pedro pedro, i wanna ask, how to render multi data for example the first data is just like item data and the second data is pagination data both are render in the same page the second data is need id from the first data. the point is, how to both and manage the pagination without rerender the first data?

  • @interceptorghost1149
    @interceptorghost114911 ай бұрын

    about us route is such a funny part😁

  • @solomonmanalili8965
    @solomonmanalili896511 ай бұрын

    On the server side fetching example you gave, is it possible to add filters on it?

  • @sabarisabari7114
    @sabarisabari711410 ай бұрын

    In this src/app folder structure, can we use context as like we used in getserversideprops method??

  • @BalaBmyprof
    @BalaBmyprof Жыл бұрын

    Thanks

  • @hamzaking127
    @hamzaking127 Жыл бұрын

    Thank you

  • @nehatiwari5211
    @nehatiwari52116 ай бұрын

    Really Good Video !! Thank you so much. Am looking for video on SEO with Nextjs 13.. wud appreciate so much if u make one for it, if u havnt already.

  • @tenr01
    @tenr0110 ай бұрын

    21:30 making this as a note for myself… you cannot use events (onClick, onChange etc) in a sever component. That can only be done in a client component. By default every component in Next.JS is a server component

  • @christiantimothy4396
    @christiantimothy43969 ай бұрын

    pls i want to ask even if you dont k now the previous Next js, do this video cover both the things i need to know in the previous version of next js?? meanwhile weldon pedro i love you man. plenty love from Nigeria

  • @uicornerwithJ
    @uicornerwithJ11 ай бұрын

    Cool, thanks !

  • @DeepLook1
    @DeepLook1 Жыл бұрын

    thank u sir...

  • @mzakysyukur3417
    @mzakysyukur341710 ай бұрын

    nice tutorial always

  • @dee.s.4513
    @dee.s.45138 ай бұрын

    Pedro, you need to zoom in on your text. Small text puts pressure on the eyes and tire people. Thanx, and you are doing great.

  • @arhabersham
    @arhabersham9 ай бұрын

    Why Pedro looks like one of the coolest Backstreet Boys ever, all of a sudden? How long its been I haven't seen this guy? Looking GREAT 😃

  • @ahmedezaldean1743
    @ahmedezaldean174311 ай бұрын

    man you saved my life

  • @Saarim-Salim
    @Saarim-Salim4 ай бұрын

    please create a video on an intermediate to an advanced level project using nextjs as well, that would help a ton

  • @diegounanue
    @diegounanue11 ай бұрын

    What do you mean with "There are large dependencies"? And can you explain how can you create only one error and loading page, and use it in all pages?

  • @BlhJ400
    @BlhJ40010 ай бұрын

    Hey, I really love the videos. Could you please tell me what should I know to be a full stack developer, i know html css and little bit of js I want to be the best with next js and the back end of course, thanks in advance!

  • @antialiasd
    @antialiasd7 ай бұрын

    Hi, I love your tutorials. It says the code for this will be in the description, but I can't find it. Am I missing something?

  • @bahaaaldein5723
    @bahaaaldein5723 Жыл бұрын

    thanks a lot

  • @antalrobert
    @antalrobertАй бұрын

    Hi how you configure the next.config when the api for example is a news api and all the images comes from different domains ?

  • @parkerrex
    @parkerrex10 ай бұрын

    This video was so fire

  • @rajatmaheshwari2512
    @rajatmaheshwari25128 ай бұрын

    Quick question, Let's take a scenario. There are two sibling components A and B both of which need access to the same dynamic data. If I was to use the cache: "no-store" method, wouldn't that mean two API calls for the exact same data? Conversely, the NextJS docs mention that incase you go with the caching method, calling the same function in different places will make just one call and serve everything else from the cache. Is there a way to refetch fresh data on each page load and have all components that need it share it from the one single call? Or is the only way to do it by using client components and a global state manager.

  • @novianto2346
    @novianto2346 Жыл бұрын

    How is the implementation of cache if we use Axios to fetch the data?

Келесі