All 29 Next.js Mistakes Beginners Make

Disclaimer: this is a sponsored video (paid). It's your responsibility to evaluate safety, accuracy and other relevant parts of the reviewed product.

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).

👉 Discord: all my courses have a private Discord where I actively participate

⏱️ Timestamps:
00:00 Intro
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

[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 man

[devklepacki]

What I love about this video is how you go through each example and insert those "oh, and btw you can also do this this other way, and this will work a little different, which may or may not be better in your use case". That's always what lack in tutorials. Everyryone is teach only one, their, strict way, and if you try to deviate from that for an inch, then everything falls aparat, but they won't tell you that!

[EverNife]

Well, this video alone is more valuable than most courses about Next.js.

Almost all mistakes solved in this video are from real-life struggles and can easily take tons of hours to figure out how to solve them alone!

Thank you for the amazing video!
I was hesitant to upgrade to Next 15 because of these doubts I had about server/client components. This video helped me a lot. :D

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

[LucaSapoW]

Just waiting for my CC turn to buy your course. You are, by far, the best teacher i ever had. Greetings from Brazil!

[roguegoblin]

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.

[psmontte]

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

[gopal]

Every minute of this video is called "QUALITY CONTENT"

[araggohnxd]

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

[hyperbrug]

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

[AliAchternaam]

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

[ustav_o]

exactly what i was looking for. keep it up!

[caldog]

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

[kertofinchi]

wow man, you need to be ambassdor of vercel, a missile of bottom lines what a implicity sharp gzipped explaination worth every second congratz you pinned as top mentor on next js

[rahulgupta]

Highly comprehensive video!
Keep going

[abishekbaiju]

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

[ansarqazi]

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!

[salkohajric]

GREAT VIDEO! Giving real world examples that are at the same time generic is best way to convey the knowledge. Even if I often read documentations and articles, I learned a lot of new things from this video and see some of my mistakes from the past, that I resolved but didn't know why was it resolved. THANK YOU for this!

[thedavistheory]

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

[technologymad]

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