All 29 Next.js Mistakes Beginners Make
Check out Semaphor for analytics here: semaphor.cloud/home (paid sponsorship).
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
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
Thanks!
Agreed
Byte Grad is super smart, another amazing video
Exactly
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!
Change the title to Mistakes devs make. I’m not a beginner and you made some great points!
You are the best Next.js teacher 🌟 I've bought overpriced Next.js courses from KZheadrs with 1M+ subscribers, but nobody explains like you do! 👍
This is actually the #1 next js video for beginners. You cleared up so much of my confusion
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 :)
Glad it was helpful!
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.
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
Thanks, enjoy!
@@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?
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.
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.
exactly what i was looking for. keep it up!
You are the man! This channel is a gold mine for people learning NextJs. Can't praise and recommend you enough!!!
Great video. I am only 20mins in and it has already cleared up server/client confusion I had while starting to work with Nextjs.
Nice!
Highly comprehensive video! Keep going
Most concise react content creator, thanks a lot for the tutorials!
Every minute of this video is called "QUALITY CONTENT"
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.
Thank you, Wesley, you resolved many of my issues.👍
Thank you. Great Explanation!
myyyyyyy heroooo its a treasure for nextjs devs!! really expecting a video like this from you!!
This was an awesome knowledge pill! I've watched it in one go and now I understand my code better. Thank you!
Thank you for the clear explanations!
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
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!
Thanks again. The only channel where I am very excited for the new uploaded videos...
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.
hands down, one of the most useful video on next.js. Subscribed.
Phenomenal collection!
Wesley, U r AMAZING! Thank you!
Really useful knowledge and well explained! So easy to miss some of these when starting with next.js. Thank you!
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.
Thank you very much for your comprehensive explanations.🥰
Brilliant video, thanks for hard work
This is pure gold.
Very informative thank you
wow. Great content , keep it up man.
Great video! Very clear
Thanks for your next js videos❤❤
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
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.
amazing quality content.kudos
Brilliant! 🚀
Amazing video! This was super helpful.
thank you very much this is a really great masterclass on next.
Enjoy!
I learned a lot. Thanks
great video!! thank you
Wonder full great explanation thank you brother. please also make a video on security in nextjs. how to add rateLimiter etc.
Please make a similar one for next-auth, thank you Grad.
Great tips!!!
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.
Great to hear, thanks! Will think about your suggestion
29 pitfalls.. makes me wonder why I keep using next.
The learning curve is real, but worth it IMO
quality work
Great video!
This is a very good video. Nice work
Useful information
thank you byte
Your videos are great
Intrusive thoughts: Take a shot every time "component" is being said
thanks. i learned a lot
Glad to hear it!
There is no way out of dynamic rendering if we need the header component in use on the page right?
Great!! I learned a lot (Mainly from the mistakes(8,9,10))
Nice!
This is so good. I want to click the like button many times for you... thanks...
thanks
Very good explaination as always! Could you please give me the VS code theme that you use?
Awesome video! I'm a bit confused about "getData" functions and the "use server" directive. We shouldn't place "use server" at the top of a file which has a bunch of "getData" functions, because we are exposing a POST endpoint, and also because calling a "getData" from a server component already make the get in the server. We should use "use server" only to mutations functions, and validate those. Did I get that right?
So I answer myself after some investigation. React recommends to use "server-actions" for mutating. According to React docs "Server Actions are designed for mutations that update server-side state; they are not recommended for data fetching.". You could use it to retrieve information but is not the intended way. Server actions request is a POST, so you will be fetching data with a POST request. I found in a Reddit post this answer: "I asked one of the members of the Vercel team on Discord if we could use server actions to fetch data. While it's possible, they don't encourage this, but the response I got was a bit ambiguous."
can we use suspense on images or Image component of Nextjs?
thanks
Lekker gedaan gap
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.
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!!
What about use clients on layout if some package requires use client to run like amplify auth
useful !
What vscode theme do you use?
Content is awesome. Volume needs to 3x atleast
Can you explain how to use Redux Toolkit or React Redux in Next.js? After implementing it, our entire application can be either client-side or server-side. I'm unclear on how to properly use it in Next.js, so could you clarify my doubts? Also, please explain the advantages and disadvantages of using Redux in Next.js. I've noticed that there are tutorials on KZhead not covering the use of Redux in Next.js. Is Redux unnecessary in Next.js, or is there a reason it's not widely used? If a larger application requires Redux in Next.js, how is it implemented? I'd appreciate it if you could address these concerns in your next video. I've commented multiple times on other channels, but I haven't received any responses. If you can create a video on this topic, it would be immensely helpful, as I've been struggling with these questions, and it seems others may have similar doubts. Thank you!
is it weird that i knew pretty much everything in here and a lot more abou tnext js ? and i only started 6 months ago where i was tasked to move pages router to app router - server actions is the only one that i have not yet played around with cause my project does not have a need for that so im good there but my one question that even nextjs is startled and not answered me yet on reddit was why did you guys deprecate import {useRouter} from 'next/router' const router = useRouter(); console.log(router.route) no answer until now Also you missed out on New MetaDataApi next/headers etc but overall master these and you pretty much have nextjs 14 in a nutshell
The next video idea, explain all the best ways to access data, covering both client and server components.
Big W Sir
What the theme u use ??
At 1.03.22 the component is client... isn't client not supposed to use async ? The onclick invoked an async called back.
is your #8 point accurate? i tried printing out like what you did and it seems like the client component does not run on the server side "once" like you mentioned. hoping to clear up some confusion.
i realized when you have a client component takes in a prop, it DOES NOT run on the server side once. if it does not take in a prop, it will run on the server side once.
The reason for this behavior is that the props passed to a Client Component are not available on the server-side, as they often come from parent components or data fetching that happens on the client-side.
great :)
Can you tell me which section of the docs mentions the fix for having a child component with a fetch statement?
btw very thankful for the video!
it's just simply masterclass..........
🔥🤛🏾🤛🏾
How to implement ISR ???
W:0W, this is masterpiece.
❤
when i update name, username in nextjs app it reflects in prisma studio but doesnt update in the app. but when i log out and then login it shows the updated data. (both in dev and build environment) what can be the possible issues??
Sounds like a caching issue. Try revalidatePath after updating the database
@@ByteGrad tried that too but doesnt worked. im using auth.js (credentials, google and github)
@@ByteGrad tried that too but doesnt worked. im using auth.js (credentials, google and github)
my reply is not showing in this comment box
i tried revalidatePath too but doent worked. im using auth.js for authentication
It's 💎
Great video, now i hate Next.js. Will switch to Remix. Thanks for the wake up call!
Na bro u can use nextjs for only SSR project
Fantastic content. Thanks. But please consider leaving some gaps in your narrative. Editing out all your breaths and gaps makes it much harder to follow, things just go by too fast.
now tell me another framework where its this easy to make 29 mistakes
Please make the video short, that'd be easier for us. How can we watch a movie like long video.
OMG NextJs has so many gotchas it's not even funny. I hate this direction for web dev with a passion.
Please make a similar one for next-auth, thank you Grad.