All 29 Next.js Mistakes Beginners Make
Check out Semaphor for analytics here: https://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: https://bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Check out Kinde for auth and more https://bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: https://bytegrad.com/courses/professi...
👉 Professional JavaScript Course: https://bytegrad.com/courses/professi...
👉 Professional CSS Course: https://bytegrad.com/courses/professi...
👉 Web development roadmap 2024 & 2025: https://email.bytegrad.com
👉 Email newsletter (BIG update soon): https://email.bytegrad.com
👉 Discord: all my courses have a private Discord where I actively participate
👉 Kinde: check out Kinde for auth and more https://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
Watch video All 29 Next.js Mistakes Beginners Make online without registration, duration hours minute second in high quality. This video was added by user ByteGrad 01 May 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 131,284 once and liked it 5.2 thousand people.