All 29 Next.js Mistakes Beginners Make

Check out Semaphor for analytics here: semaphor.cloud/home (paid sponsorship).
Disclaimer: this is a sponsored video (paid). It's your responsibility to evaluate safety, accuracy and other relevant parts of the reviewed product.
NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for auth and more bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Web development roadmap 2024 & 2025: email.bytegrad.com
👉 Email newsletter (BIG update soon): email.bytegrad.com
👉 Discord: all my courses have a private Discord where I actively participate
👉 Kinde: check out Kinde for auth and more bit.ly/3QOe1Bh
⏱️ Timestamps:
00:00 Intro
01:58 Semaphor (add analytics to your Next.js app!)
04:11 #1: "use client" too high
09:45 #2: Not refactoring for "use client"
10:45 #3: Thinking a component is a server component because it does not have "use client"
12:28 #4: Thinking that a server component becomes a client component if you wrap it inside a client component
17:52 #5: Using state management (Context API, Zustand, Redux) in server components
19:37 #6: Using ‘use server’ to create a server component
21:46 #7: Accidentally leaking sensitive data from server to client
23:01 #8: Thinking that client components only run in the client
27:53 #9: Using browser API’s (e.g. localStorage) incorrectly
33:08 #10: Getting hydration errors
38:43 #11: Incorrectly dealing with third-party components
42:27 #12: Using route handlers for getting data
44:28 #13: Thinking it’s a problem to get the same data in different places
48:45 #14: Getting a ‘waterfall’ effect when fetching data
53:12 #15: Submitting data to server component or route handler
59:38 #16: Getting confused when the page doesn’t reflect data mutation
1:01:43 #17: Thinking that server actions can only be used in server components
1:03:40 #18: Forgetting to validate & protect server actions
1:07:26 #19: Adding ‘use server’ to make sure something stays on the server
1:09:35 #20: Misunderstanding dynamic routes (params & searchParams)
1:13:12 #21: Incorrectly working with searchParams
1:19:12 #22: Forgetting to deal with loading state
1:20:35 #23: Not being granular with Suspense
1:22:53 #24: Adding Suspense in the wrong place
1:23:40 #25: Forgetting ‘key’ prop for Suspense
1:29:49 #26: Accidentally opting a page out of static rendering
1:36:10 #27: Hardcoding secrets
1:39:52 #28: Not making a distinction between client and server utils
1:42:05 #29: Using redirect() in try / catch
#webdevelopment #reactjs #nextjs

Пікірлер: 184

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

    Hi, my latest course is out now (Professional React & Next.js): bytegrad.com/courses/professional-react-nextjs -- I'm very proud of this course, my best work! I'm also a brand ambassador for Kinde (paid sponsorship). Check out Kinde for authentication and more bit.ly/3QOe1Bh

  • @niconel7659

    @niconel7659

    14 күн бұрын

    Do you offer regional discounts like some other authors, taking in account students country? (like South Africa with a very weak Rand to the US Dollar)

  • @justincheong6159

    @justincheong6159

    2 күн бұрын

    Hi will you be offering your latest course (React & Next.js) on Udemy? I saw your previous 2 courses were already on Udemy and my preference is to buy from there. Thanks

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

    you are THE ONLY ONE who actually is trying to explain this on examples which aren't complete copies of the documentation together with the same, exactly the same, explanation. I'm so thankful I can't even express this properly in words, it's very frustrating to look for some explanations and just getting these videos with the exact documentation copy paste with 0 info over and over and over again...... man

  • @ByteGrad

    @ByteGrad

    Ай бұрын

    Thanks!

  • @mangoherpson

    @mangoherpson

    Ай бұрын

    Agreed

  • @olusanyaolamide9764

    @olusanyaolamide9764

    Ай бұрын

    Byte Grad is super smart, another amazing video

  • @FendiFliperachi

    @FendiFliperachi

    Ай бұрын

    Exactly

  • @caldog20
    @caldog202 күн бұрын

    After the first few sections, I ended up watching the entire video. You do an excellent job of providing real world scenarios and examples on the topics, as well as explaining the alternative of your advice. Awesome work

  • @justincheong6159
    @justincheong61592 күн бұрын

    I have seen quite a lot of NextJS videos on KZread and also courses from Udemy. This is the BEST so far. Practical examples to demonstrate the mistakes. And most importantly it rephrases those big terms we see in documentation in a layman way that beginner can understand. Thanks for the video

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

    This is gold, thank you. Well explained, especially the server/client component differences and woes, such as Hydration errors. Extra Side Note: I rarely, if ever, watch a 2h video tutorial in one go, so kudos for keeping it extremely relevant for Next.js devs :)

  • @ByteGrad

    @ByteGrad

    Ай бұрын

    Glad it was helpful!

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

    I've been working with Nextjs for two years and you made me aware of so much mistakes I made in past projects. Great video.

  • @MirkoVukusic
    @MirkoVukusic10 күн бұрын

    really good video. At start i thought it's too fast, but repeating stuff just makes it so clear by the end

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

    This is actually the #1 next js video for beginners. You cleared up so much of my confusion

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

    You are the best Next.js teacher 🌟 I've bought overpriced Next.js courses from KZreadrs with 1M+ subscribers, but nobody explains like you do! 👍

  • @araggohnxd
    @araggohnxd7 күн бұрын

    this is not only the best nextjs video I've watched, it is also one of the best overall programming videos I've ever watched. I can't stress enough how useful this is. thank you so much!!!

  • @aripanda4209
    @aripanda420912 күн бұрын

    Video is freakishly helpful. Great job buddy.

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

    exactly what i was looking for. keep it up!

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

    You are the man! This channel is a gold mine for people learning NextJs. Can't praise and recommend you enough!!!

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

    Highly comprehensive video! Keep going

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

    I'm just around half way there in the video & feeling like I have watched hours long tutorial. Highly appreciate the content! Highly appreciate your efforts & knowledge! Bundle of thanks!

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

    Great video. I am only 20mins in and it has already cleared up server/client confusion I had while starting to work with Nextjs.

  • @ByteGrad

    @ByteGrad

    Ай бұрын

    Nice!

  • @erlanggadewasakti
    @erlanggadewasakti7 күн бұрын

    you are such kind of superhero , thanks for the lesson

  • @wusswuzz5818
    @wusswuzz581828 күн бұрын

    This was one of the best deliveries i have seen outside of dave gray. Will be picking up that course, and hoping it is delivered with the same clarity.

  • @ByteGrad

    @ByteGrad

    28 күн бұрын

    Awesome, enjoy!

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

    best NextJS video on KZread & it's not even close

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

    Thanks again. The only channel where I am very excited for the new uploaded videos...

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

    Most concise react content creator, thanks a lot for the tutorials!

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

    myyyyyyy heroooo its a treasure for nextjs devs!! really expecting a video like this from you!!

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

    Thank you, Wesley, you resolved many of my issues.👍

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

    Nice overview! I have some experience with React and started learning NextJs. Currently, I'm building a full-stack app, and for a front-end I decided to use NextJs. So your video is a good reminder of which mistakes need to be avoided.

  • @bribri-dy1te
    @bribri-dy1te29 күн бұрын

    This is what we need, it clears all the misconception about next js, huge thanks to you sir.

  • @shashank.superone
    @shashank.superoneАй бұрын

    Amazing! Awesome! Fabulous! You have explained ALL what all common confusions go on with NextJs. NextJs should include this video in their official guides and help/troubleshoot/Faqs docs. This cleared most of my doubts for which I was not finding a fitting resolutions together combined anywhere else. ❤ Thanks alot #ByteGrad

  • @ByteGrad

    @ByteGrad

    Ай бұрын

    Thanks, enjoy!

  • @shashank.superone

    @shashank.superone

    Ай бұрын

    ​@@ByteGrad One thing doubt remains, when I have to use header on all page, or authentications , how to make sure not all pages become dynamic rendered? U said middleware word, but that not explained. What is real solution?

  • @kaziprosper2229

    @kaziprosper2229

    Ай бұрын

    Middleware is a special file you create at the root of your next js project. This file is where you put all your authentication logic. Just like loading, error, route and page files have a special meaning in next js, a middleware file would automatically be recognized by next js and would be run by next js before the routes you specify in the matcher of helper function written in your middleware file.

  • @hey.............
    @hey.............Ай бұрын

    hands down, one of the most useful video on next.js. Subscribed.

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

    Thank you for the clear explanations!

  • @sittshayne4130
    @sittshayne413014 күн бұрын

    Awesome this is a exactly what I needed. Thanks so much for making this video.

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

    This was an awesome knowledge pill! I've watched it in one go and now I understand my code better. Thank you!

  • @user-un9cs7zq5w
    @user-un9cs7zq5wАй бұрын

    Thank you. Great Explanation!

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

    Only about half hour into the video, but already learning a lot. Thank you so much for making this

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

    One of the best video on NextJS doubts which will only arise once you become expert in NextJS after completing FEW videos FEW projects. But your video is so amazing that if any dev will watch it completely will definitely become pro in NextJS and any confusion which used to come when we do large project will be cleared out after watching this, Thanks :) Much love from India.

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

    Great video, bro! I learned a lot more than I did from the Next.js documentation because you explained things thoroughly. Thanks a lot for your hard work.

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

    My god was that well explained. I needed that video months ago when I started my project it would have help soooo much. Thank you for the video

  • @ztipsamme
    @ztipsamme25 күн бұрын

    Perfect timing! I'm currently on week 4 of learning Next.js and this video has been very helpful 🤓🙏🏼

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

    This is pure gold.

  • @ritavdas7570
    @ritavdas757021 күн бұрын

    This video is an absolute gem! 🌟 The explanation of the Next.js app router and pages router differences was incredibly clear and helpful. The examples provided on server components and client components really made it easy to understand where to use each. I especially appreciated the deep dive into hydration errors and how to handle them. Keep up the great work! 🚀👏

  • @insane-works
    @insane-worksАй бұрын

    wowzers! this was awesome 2 hours! agreed with comments above, mistakes you were showing, was the mistakes i made in a some of my previous projects great job! subscribed!

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

    Movie length video. GOATed

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

    lot of hard work. just 12 minutes into this video and i already liked and subscribed this channel.

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hdАй бұрын

    thanks man, keep posting videos like this

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

    Great video! Very clear

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

    Wesley, U r AMAZING! Thank you!

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

    Really useful knowledge and well explained! So easy to miss some of these when starting with next.js. Thank you!

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

    Every minute of this video is called "QUALITY CONTENT"

  • @nikita-dev
    @nikita-devАй бұрын

    Amazing video! This was super helpful.

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

    Phenomenal collection!

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

    Brilliant video, thanks for hard work

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

    You earned a sub, Next God.

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

    very deep and easy understanding explaination

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

    Great!! I learned a lot (Mainly from the mistakes(8,9,10))

  • @ByteGrad

    @ByteGrad

    Ай бұрын

    Nice!

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

    This tutorial definetly should have saved thousands of Nextjs devs lol. Was at least 100x better than the nextjs documentation

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

    Thank you very much for your comprehensive explanations.🥰

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

    Your course was amazing and your videos are always top tier. I would love it if you could do a database design course/series of videos.

  • @ByteGrad

    @ByteGrad

    Ай бұрын

    Great to hear, thanks! Will think about your suggestion

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

    29 pitfalls.. makes me wonder why I keep using next.

  • @ByteGrad

    @ByteGrad

    Ай бұрын

    The learning curve is real, but worth it IMO

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

    thank you very much this is a really great masterclass on next.

  • @ByteGrad

    @ByteGrad

    Ай бұрын

    Enjoy!

  • @russobradock
    @russobradock19 күн бұрын

    Thank you very much. What wonderful content, it will be of great help in future projects.

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

    Very informative thank you

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

    Thanks for your next js videos❤❤

  • @oxusss
    @oxusss19 күн бұрын

    Great video! Thank you for making this

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

    great video!! thank you

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

    Great tips!!!

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

    Wow sir you are attempting to do those things which other youtube doesn't focus on thank you sir 🥰🥰😍

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

    amazing quality content.kudos

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

    Please make a similar one for next-auth, thank you Grad.

  • @universalproblemsolver
    @universalproblemsolver22 күн бұрын

    Not even halfway through. AMAZING. I have learned some of the subtle dance between client and server. Thank you, I thought I was going crazy. Question about your course (React + Next): Do you provide a pattern of Client > Next Auth > Server > Database > Back to Client > Edit/Update/Upsert > Revalidate? Or something close? If not, can I request a paid consultation?

  • @ByteGrad

    @ByteGrad

    22 күн бұрын

    Hi, yes CRUD is part of the course

  • @universalproblemsolver

    @universalproblemsolver

    22 күн бұрын

    @@ByteGrad Cheers, new subscriber and purchasing course.

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

    Brilliant! 🚀

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

    wow. Great content , keep it up man.

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

    Change the title to Mistakes devs make. I’m not a beginner and you made some great points!

  • Ай бұрын

    Great video!

  • @zarefgamz2515
    @zarefgamz251511 күн бұрын

    amazing video, i started to smell my code and when i went to your video, it was indeed my code was smelly :D

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

    I learned a lot. Thanks

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

    This video is really good. I’ve just finished reading the docs and you just filled all the blanks in my mind. Btw, what Vs code theme are you using? Thx

  • @zoirjonabduvohidov2897
    @zoirjonabduvohidov289720 күн бұрын

    I can say just very good video for all not only beginners

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

    Content is awesome. Volume needs to 3x atleast

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

    Coming from other ssr frameworks it’s absolutely terrifying using web APIs causes next to entirely collapse without specifying magic words use client. Just something you don’t need to think about in other frameworks.

  • 21 күн бұрын

    very informative , thanks

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

    This video is super relevant, I learned a lot of things, I found out that I was not validating my server actions, I'll have to address this because I thought that nextjs automatically validated them but now that I think, there's now way that next will know what type things are for validation, this is just a typescript layer. I have to come up with a nice validation strategy for keeping types but knowing that it can be unknow data for server actions.

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

    Useful information

  • @dn5426
    @dn54263 күн бұрын

    idk if we should call them mistakes or footguns :D either way, great video!

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

    This is a very good video. Nice work

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

    This is so good. I want to click the like button many times for you... thanks...

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

    thanks. i learned a lot

  • @ByteGrad

    @ByteGrad

    Ай бұрын

    Glad to hear it!

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

    Wonder full great explanation thank you brother. please also make a video on security in nextjs. how to add rateLimiter etc.

  • @justinleong3967
    @justinleong396728 күн бұрын

    Excellent explanation

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

    Intrusive thoughts: Take a shot every time "component" is being said

  • @Wulleybully

    @Wulleybully

    2 күн бұрын

    My brother in Christ are you trying to die?

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

    thank you byte

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

    Lekker gedaan gap

  • @DrShmuck
    @DrShmuck25 күн бұрын

    Such an underrated channel!

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

    If I have a card component that fetches database data, and this card component needs a zustand state transferred via props, how could it be done? The issue appears when I need client parent component using client state, and loads a child from server component. If I do an API I can solve this because everything will run at the client, but I want to get rid of APIs to connect to the database. thanks!!

  • @Harshit.git911
    @Harshit.git911Ай бұрын

    quality work

  • @user-xp6gm2bz8w
    @user-xp6gm2bz8w27 күн бұрын

    Incredible content 👏

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

    I normally dislike youtube videos to learn about frameworks and programming but, I believe nextjs documentation is way too high level and as soon as you hit some specific problem is rather useless. As many others said, this cleared a lot of my confusion with nextJS, thank you.

  • @arthurarthur732
    @arthurarthur73216 күн бұрын

    Amazing video 🎉

  • @rishavacharya7686
    @rishavacharya76863 күн бұрын

    Good Stuff!

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

    Your videos are great

  • @ethanforvest
    @ethanforvest14 күн бұрын

    Thank you bro

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

    useful !

  • @mtn166
    @mtn1666 күн бұрын

    Very helpful for me