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

Поділитися
Вставка
  • Опубліковано 11 гру 2024

КОМЕНТАРІ • 172

  • @sanjeevanibhandari5652
    @sanjeevanibhandari5652 Рік тому +45

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

  • @luniacllama8373
    @luniacllama8373 Рік тому +24

    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!

  • @mohammadidris4481
    @mohammadidris4481 Рік тому +5

    I have watched several tutorials on UA-cam 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

  • @eternalmisunderstood6342
    @eternalmisunderstood6342 Рік тому +3

    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.

  • @Agong22067
    @Agong22067 Рік тому

    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.

  • @johnedwardubalde3433
    @johnedwardubalde3433 Рік тому

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

  • @sadique_x_
    @sadique_x_ Рік тому

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

  • @lovepreetSingh-rx4vz
    @lovepreetSingh-rx4vz 11 місяців тому

    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

  • @unhandledexception1948
    @unhandledexception1948 Рік тому +1

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

  • @totfosk
    @totfosk Рік тому +3

    i am wondering how the hell can the other UA-camrs 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!!!!!

  • @tenr01
    @tenr01 Рік тому

    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

  • @Meshv_patel
    @Meshv_patel Рік тому

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

  • @dhruvshah8310
    @dhruvshah8310 Рік тому +5

    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 Рік тому +2

    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.

  • @ericsecretaria
    @ericsecretaria Рік тому +2

    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.

  • @anthonygesora2517
    @anthonygesora2517 Рік тому +1

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

  • @Jawa332
    @Jawa332 Рік тому +1

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

  • @IbrahimSikder-e3x
    @IbrahimSikder-e3x Рік тому

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

  • @AlejandroRL868
    @AlejandroRL868 Рік тому +1

    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!

  • @paulocesarabudfilho5309
    @paulocesarabudfilho5309 Рік тому +1

    Oh my god I was LOOKING FOR THIS 😍

  • @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 👌👌💥💥

  • @ThiagoLucioBittencourt
    @ThiagoLucioBittencourt 11 місяців тому

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

  • @affangavankar8848
    @affangavankar8848 Рік тому

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

  • @tenr01
    @tenr01 Рік тому

    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

  • @TheZubbyShow
    @TheZubbyShow Рік тому +1

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

  • @refadhile
    @refadhile Рік тому

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

  • @rfryanfavour4369
    @rfryanfavour4369 Рік тому +2

    You deserve an award bro I fr 🎉

  • @k303k
    @k303k Рік тому +1

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

  • @pouyabh
    @pouyabh Рік тому

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

  • @legendaryfootball4222
    @legendaryfootball4222 Рік тому +3

    I'have been waiting 😭😭❤

  • @user-Chinchu_Ori
    @user-Chinchu_Ori Рік тому +1

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

  • @shaked1233
    @shaked1233 Рік тому

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

  • @Hassanrafique198
    @Hassanrafique198 Рік тому

    Clear and Concise tutorial. Thanks!

  • @AE-qj5xi
    @AE-qj5xi Рік тому +2

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

  • @pinkimandal6842
    @pinkimandal6842 Рік тому

    your teaching way is good and understandable.

  • @MuneebR7
    @MuneebR7 Рік тому

    You make it so easy to understand everything .

  • @appstuff6565
    @appstuff6565 Рік тому

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

  • @buddhalama4041
    @buddhalama4041 Рік тому

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

  • @mohamedmmdoh5918
    @mohamedmmdoh5918 11 місяців тому +1

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

  • @anthonygesora2517
    @anthonygesora2517 Рік тому +2

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

  • @rashmany
    @rashmany Рік тому

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

  • @lscodeschool957
    @lscodeschool957 Рік тому

    Thank you Pedro, this was amazingly clear

  • @ChukwunenyeEmmanuel-o5x
    @ChukwunenyeEmmanuel-o5x 3 місяці тому

    You’re a great teacher!! 👏🏾👏🏾

  • @kashmirtechtv2948
    @kashmirtechtv2948 Рік тому

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

  • @albertoiong6895
    @albertoiong6895 Рік тому

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

  • @walterjorgemazzoni
    @walterjorgemazzoni Рік тому +3

    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

  • @Andrewheinx
    @Andrewheinx Рік тому

    Super clean explanation. Keep it up brother

  • @dee.s.4513
    @dee.s.4513 Рік тому

    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.

  • @mohammadpartovi1813
    @mohammadpartovi1813 Рік тому

    Fantastic tutorial. Thanks for sharing your knowledge.

  • @Igor-nd3nf
    @Igor-nd3nf Рік тому +1

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

  • @xGalasko
    @xGalasko Рік тому

    Fantastic video very concise and great communication. Thank you.

  • @lukas.webdev
    @lukas.webdev Рік тому +1

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

  • @arhabersham
    @arhabersham Рік тому

    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 😃

  • @MayankKumar-yf6bw
    @MayankKumar-yf6bw Рік тому

    Life saver video, Hats Off 🙌

  • @derarageremu
    @derarageremu Рік тому

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

  • @waifucodes
    @waifucodes Рік тому

    thank u Pedro! i love your tutorials

  • @coderite_
    @coderite_ Рік тому

    Thanks a lot Pedro. This is awesome

  • @Codewith0xConcept
    @Codewith0xConcept Рік тому

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

  • @vaibhavkumar8140
    @vaibhavkumar8140 Рік тому +3

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

  • @rvileladesigner-renan8694
    @rvileladesigner-renan8694 Рік тому

    Great video bro, bro! Thank you

  • @sonamohialdin3376
    @sonamohialdin3376 Рік тому

    Very helpful and understandable tutorial thank you

  • @glautermoulin
    @glautermoulin Рік тому +1

    Valeu!

  • @devdotcode
    @devdotcode Рік тому

    Since data is rendered on the server, do I need to really reload the page so that I will have a fresh data? What is the workaround for this on the client side? Let's say you have a navigation and I want an updated data everytime I go back to that page without reloading. I hope you can answer this, Thank you!

  • @interceptorghost1149
    @interceptorghost1149 Рік тому

    about us route is such a funny part😁

  • @mengfandy7365
    @mengfandy7365 Рік тому +1

    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?

  • @legendaryfootball4222
    @legendaryfootball4222 Рік тому +1

    why is the data from the api not shown in the console when it is console logged but is displayed in the browser when you map through it and render it

  • @shri_x1
    @shri_x1 Рік тому +2

    the users console log is shown in terminal because its a server component .. if client comp means the console log show in browser console

  • @naufalnasrullah6965
    @naufalnasrullah6965 Рік тому

    13:51 why home page does'nt have footer can anyone explain?

  • @serveshchaturvedi2034
    @serveshchaturvedi2034 Рік тому +1

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

  • @Saarim-Salim
    @Saarim-Salim 11 місяців тому

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

  • @christiantimothy4396
    @christiantimothy4396 Рік тому

    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

  • @ayoubnachat5920
    @ayoubnachat5920 Рік тому +1

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

  • @hashira_d
    @hashira_d Рік тому

    I am in love with your content ❤

  • @luizinhogm
    @luizinhogm Рік тому

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

  • @delkitonyi
    @delkitonyi Рік тому

    You're always on point.

  • @developerprofile6565
    @developerprofile6565 Рік тому

    Love from India ❤❤❤❤

  • @erickeft
    @erickeft Рік тому

    thanks a lot Pedro! 👊👊

  • @Nanashi-rq7lk
    @Nanashi-rq7lk Рік тому

    Thanks for the nice tutorial. I learned a lot.

  • @realdiegor
    @realdiegor Рік тому

    We all laughed at 27:17 with that doggo, not only Pedro

  • @nepalrameshwor1540
    @nepalrameshwor1540 Рік тому

    nice and clear explanation

  • @Yasma527
    @Yasma527 Рік тому

    I like your videos brother. I Learn skills And also English, I'am CUBAN. Thank you so much

  • @mmd1dev
    @mmd1dev Рік тому

    great thank you Pedro😍😍😍😍😍

  • @tephrosisOfficial
    @tephrosisOfficial Рік тому

    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?

  • @sabarisabari7114
    @sabarisabari7114 Рік тому

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

  • @treksis
    @treksis Рік тому

    crystal clear thank you

  • @ruizxzx
    @ruizxzx Рік тому +4

    Is it enough for being a full stack dev? i mean i know other things like react and all..

    • @PedroTechnologies
      @PedroTechnologies  Рік тому +1

      Programmers are usually divided by their specialization. If you are a fullstack dev you ill be enough for full-stack roles. I would recommend sticking to something and being the best at it instead of trying to learn everything

  • @solomonmanalili8965
    @solomonmanalili8965 Рік тому

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

  • @gangaautomobiles3071
    @gangaautomobiles3071 Рік тому

    awesome explanation.. thanks a lot

  • @rajatmaheshwari2512
    @rajatmaheshwari2512 Рік тому

    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.

  • @ilhamsa01
    @ilhamsa01 Рік тому

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

  • @caltagos
    @caltagos Рік тому +1

    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?

  • @antalrobert
    @antalrobert 8 місяців тому

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

  • @markus-linke
    @markus-linke Рік тому

    Great video, thanks!

  • @kimbapslayer1995
    @kimbapslayer1995 Рік тому

    What’s the next 13 way to generate static paths? I’m getting an vercel deployment error cos my paths are not being generated correctly from my headless cms. I tried refactoring old code and following the docs but it’s not working.

  • @edenkefale7129
    @edenkefale7129 Рік тому

    Amazing! Thank You

  • @RedXtremeHacker
    @RedXtremeHacker Рік тому +2

    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.

  • @kashmirtechtv2948
    @kashmirtechtv2948 Рік тому

    Decrease amount of JavaScript means? 33:38

  • @alexpanteli3651
    @alexpanteli3651 Рік тому

    Thanks for this tutorial

  • @novianto2346
    @novianto2346 Рік тому

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

  • @diegounanue
    @diegounanue 11 місяців тому

    Why you don't use await when you do return res.json()?