Don't Make These Next.js Mistakes

Подписаться 313 тыс.

Просмотров 21 тыс.

50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Don't make these Next.js mistakes! Like everything with Next.js, client components are not as simple as they seem. This video looks at some common mistakes and misconceptions with Nextjs client components.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
🔗 My Next.js Videos: • Next.js Tutorials for ...
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Don't Make These Next.js Mistakes
(00:00) Intro
(00:09) Welcome
(00:32) Next.js Client Component Mistakes
(01:09) Next.js Mistake #1
(06:26) Next.js Mistake #2
(10:39) Next.js Mistake #3
(11:58) Final Thoughts
📚 Tutorial References:
🔗 Next.js docs "How Client Components are Rendered": nextjs.org/docs/app/building-...
🔗 Next.js docs "Text content does not match server rendered HTML": nextjs.org/docs/messages/reac...
Was this tutorial about the problem with Next.js helpful? If so, please share. Let me know your thoughts in the comments.
#nextjs #mistakes #client

Опубликовано:

16 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 135

@ostap418 2 месяца назад

This is the best channel on next ever. I am coming from backend background and had difficulties learning frontend with react and all its quarks compared to vue and nuxt. But this channel is what single-handedly convinced me to learn react and next.

@thelostvorg7805 2 месяца назад

I was very pleasant with the knowledge you shared and how it made many concepts clear for me , especially the error related to hydration and what cause it to happen. I was also surprised to realise that I was not a subscriber even though I have been watching many of your tutorials since a long time ago 😁.

@DaveGrayTeachesCode 2 месяца назад

Welcome aboard!

@deep_kungch3010 Месяц назад

What a great content 😊 this is the best channel I’ve ever seen about this topic

@DaveGrayTeachesCode Месяц назад

Thank you!

@FredBCavalheiro 2 месяца назад

Thanks for the content. You help so much.

@DaveGrayTeachesCode 2 месяца назад

You're welcome 🙌

@GabrielMartinez-ez9ue 2 месяца назад

Thanks Dave. I am done with nextjs at this point. Beginning 2023 i was learning Rails for large apps and Svelte for small apps. I will even prefer to just have a node api than to continue using nextjs.

@DaveGrayTeachesCode 2 месяца назад

Thanks for sharing. It has been a polarizing framework.

@abrehamtilahun4820 2 месяца назад

To be honest I am telling you that you help me a lot in my career. Keep going keep it up

@DaveGrayTeachesCode 2 месяца назад

Always glad to hear that! 🙌

@developedbynick 2 месяца назад

Was going over this the other day, and was confused. This cleared things up Thanks Dave👍

@DaveGrayTeachesCode 2 месяца назад

Glad to help

@kumargupta7149 2 месяца назад

Thanks Dave concise and to the point.

@DaveGrayTeachesCode 2 месяца назад

You're welcome! 🙌

@codesymphony 2 месяца назад

to the point? it took 1.5 mins just for the video to start

@DaveGrayTeachesCode 2 месяца назад

@@codesymphony 😆 YMMV

@codesymphony 2 месяца назад

@@DaveGrayTeachesCode keep up the good work 😋

@johnforeverrules 2 месяца назад

Thanks for the informative video Dave. May God bless you

@DaveGrayTeachesCode 2 месяца назад

You're welcome!

@fran_sar 2 месяца назад

Awesome video, thank you!

@DaveGrayTeachesCode 2 месяца назад

You're welcome!

@namaefumei 2 месяца назад

Great tips thanks! Really tiring to use this tool. It really doesn't want to be used.

@DaveGrayTeachesCode 2 месяца назад

It can feel that way

@rad0f 2 месяца назад

Great content, can you also make a video when you get a chance about when to use Django/htmx and when to use Next.js? I know and work in both and always get confused on which one to pick.

@DaveGrayTeachesCode 2 месяца назад

You can use either one if you know both. I always say go with what you know best!

@mouadharmouche7692 Месяц назад

Great Video!

@andrewpaulhart 2 месяца назад

Many thanks. I’ve been having trouble wrapping my head around how to fetch data on the server and make use of data from hooks. I kept on ending up with practically everything being a client component and fetching all my data at the top level. If I understand correctly all I have to do is separate the data fetching into a child component and pass it the hook data.

@DaveGrayTeachesCode 2 месяца назад

I don't know your data source, but most would use a server component to get data directly from a database. If you need to fetch data from a 3rd party API, you can do that in a server component, too. You can then pass the data to a client component.

@witoldwozniak6990 2 месяца назад

Hi Dave, Thank you for all the magnificent work you are doing. I love your videos, most of all because you have found a perfect method of being beginner-friendly, while not treating your viewers like idiots, which can be difficult. I would love to see you teach C#/.NET, as I struggle to find online courses that would be even remotely accessible and useful as your courses are. I also believe you would do awesome teaching lower-level languages like C, C++, or Rust. I think your unique way of teaching could alleviate so many difficulties that come with topics related to low-level languages. Have you ever considered creating such courses? Anyway, thank you for all the work you are doing. Amazing job. Cheers!

@DaveGrayTeachesCode 2 месяца назад

Thank you for the kind words and for the requests! 🙌

@incarnateTheGreat Месяц назад

The Client-Server wrapper issue is something Next.js likely wanta to improve upon. Why? Because it warrants videos like these where we need explanations. I do appreciate the content; it really helps. The thing is that many people are complaining about Next being slow, being complex, breaking builds, etc. I'm positive that they're trying to get to a point where they will have solid, stable releases that will make all of this a thing of the past.

@DaveGrayTeachesCode Месяц назад

Glad you like the content and I agree! They will get it sorted.

@John-eq5cd 2 месяца назад

Good stuff, thank you

@DaveGrayTeachesCode 2 месяца назад

You're welcome!

@SauriVega 2 месяца назад

I had an issue very weird on some tests with next, to be honest i used angular at the end of the day

@luisllaboj 2 месяца назад

Actually components marked with the “use client” directive do not result in a React Server Component Payload, yes all the components run on the server and that’s why the error is thrown but they’re not sent to the client as RSC Payload unless it’s a Server Component. Client components are rendered on the server thanks to Server Side Rendering (SSR), and later the same JS bundle re runs on the client to hydrate, which is different from RSC Payload. RSC payload it’s a new way to send data to the client, but it won’t send any JavaScript bundle or anything to hydrate on the client.

@DaveGrayTeachesCode 2 месяца назад

Thanks for the comment. I can see where I did not make this information clear enough. If anyone is interested, the specifics are discussed in the docs here: nextjs.org/docs/app/building-your-application/rendering/client-components#how-are-client-components-rendered

@hondaxblade2127 2 месяца назад

Thank u sir... I learned a lot of things from your videos ❤ Love from INDIA ❤

@DaveGrayTeachesCode 2 месяца назад

Glad to hear that

@criticalthinker88gis13 2 месяца назад

Thanks, great video

@DaveGrayTeachesCode 2 месяца назад

You're welcome!

@nigeryanes1987 2 месяца назад

Thanks Dave 👍

@DaveGrayTeachesCode 2 месяца назад

You're welcome!

@codernerd7076 2 месяца назад

Hope one day you will make a Remix series and compare it to Next.js

@nabinsaud4688 2 месяца назад

Yes remix is awesome it doesn't consume that much memory like nextjs

@DaveGrayTeachesCode 2 месяца назад

Great request! 🙌

@omnilothar 2 месяца назад

sometimes I get confused with this use client thing, usually I quick fix it with lazy load the component (next/dynamic)

@mxsniper223 2 месяца назад

thanks man ❤️💓

@DaveGrayTeachesCode 2 месяца назад

Welcome! 🙌

@alexm9104 2 месяца назад

I think much of the confusion stems from the terminology used to describe these things. A more suitable naming convention might be "dynamic component" and "static component". While this terminology may seem less intuitive initially, it eliminates the misconception that client components are exclusive to the client side.

@DaveGrayTeachesCode 2 месяца назад

I think you make a good point!

@joaoarthurbandeira 2 месяца назад

Hey Dave, great video as always! Regarding the first mistake, i've learned the hard way...I made this mistake in my project and now i am having to refactor it to fix it. Basically, i am making a document automation platform with templates and documents where i use `Quill` library a lot and it was working fine and i could `npm run dev` and work on it with localhost normally. When i finally was ready to deploy, i ran `npm run build` and the problem appeared, i got this exact error you've mentioned of `window is not defined`. I struggled until finding why (apparently, the quill library uses the `window` object inside of it), and now what i am doing is creating a separate component only to load my `QuillEditor` library and then dynamic importing it with `ssr:false` to the pages/components i need to use it. I've finished doing that in one page and it worked, now i just need to fix the others...Do you know exactly why that fixes the problem? Or would you reccomend other approach? Anyways, I wish i knew that before but hey, at least i've learned the lesson and wont make that mistake ever again, and now i will always run build throughout the project not just at the end! Hahaha. Cheers man!

@joaoarthurbandeira 2 месяца назад

Btw, i am making this platform with nextjs + redux toolkit/rtk query in the frontend and django rest framework + djoser, using jwt http only secure cookie + csrf tokens at the backend. What do you think about this stack? I would love to see your opinion and also some video of yours using these nextjs + drf together!

@DaveGrayTeachesCode 2 месяца назад

Yes, it fixes the issue because the Quill library referenced the window object which is only available in the browser. Next.js will render on the server first - even for client components the first time. That's much of the focus of this video. Glad it helped!

@DaveGrayTeachesCode 2 месяца назад

That sounds like it works for you, but it also sounds complex. I'm using Next.js as a fullstack solution without an additional client-side state management library or an additional REST API. Of course, everyone's needs vary and you may need to do this. It's all good!

@AnindoSarker 2 месяца назад

For Quill, use dynamic import instead. This will solve your import issues

@John-eq5cd 2 месяца назад

Thanks!

@DaveGrayTeachesCode 2 месяца назад

Thank you for the support!

@CryptoKosh 2 месяца назад

Awesome ❤

@mehdijafarzade2381 2 месяца назад

Thank you♥

@DaveGrayTeachesCode 2 месяца назад

Welcome!

@UPDZorg 2 месяца назад

Thanks sir

@akashjan4 2 месяца назад

I'm working on a project on T3Stack and moving Next.js page routes to the app router. I'm facing a lot of challenges in that, and this video really points out some mistakes I'm making in the migration process. Do you know of any tutorials around migrating T3Stack page routes to the app router?

@adrian34234 2 месяца назад

It is also worth mentioning that importing a client component into another (server) component does not make it a "use client"

@DaveGrayTeachesCode 2 месяца назад

True!

@jasonwhittaker3940 2 месяца назад

How to explain something in less than 15 minutes better than hours elsewhere.

@rasul3d 2 месяца назад

Context sometimes works unpredictable. Like separate from project.

@deepmane5845 2 месяца назад

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

@MichaelShingo 2 месяца назад

Does turning an entire page into a client component mean that search engines cannot index the contents of the page properly?

@DaveGrayTeachesCode 2 месяца назад

No, because Next.js renders client components on the server first. That's part of what I explain here with the window object. This means search engines will at least get to see whatever is rendered on the server before client hydration.

@MichaelShingo 2 месяца назад

@@DaveGrayTeachesCode thank you, I was having troubling finding a clear answer on this !

@ayukalvieri3154 2 месяца назад

@@DaveGrayTeachesCode NextJs renders client components on the server first? I thought it only renders server components on the server?.

@bioburden 2 месяца назад

If you are familiar with the pages router, then client components basically render like that. The difference is that server components do not ship any JS to the browser, client components do.

@ayukalvieri3154 2 месяца назад

@@bioburden ohh thanks for the clarification

@user-us3bs8px3m 2 месяца назад

By now I've faced all of these mistakes.

@DaveGrayTeachesCode 2 месяца назад

You are not alone.

@misajid2264 2 месяца назад

is there any other way? i don't like that delay caused by useEffect

@DaveGrayTeachesCode 2 месяца назад

Check out the link to the docs I gave in the description. They offer a few suggestions.

@wusswuzz5818 2 месяца назад

Can pre render be opted out of?

@DaveGrayTeachesCode 2 месяца назад

Look at the NoSSR solution on the Next.js docs page I referenced.

@webminsk7884 2 месяца назад

You are the best/ Thx

@DaveGrayTeachesCode 2 месяца назад

Thank you!

@firmannugraha3614 2 месяца назад

Hi dave. Can you make a comment on devin ? It always scared me when i continue learn coding. Will we be replaced ? Especially junior Software engineer ?

@imkir4n 2 месяца назад

No. U can continue

@coderprakash 2 месяца назад

Yess juniors with no skills will be replaced but juniors with senior skills will not be replaced and also those who don't use AI tools for optimised work they will be replaced vice versa 😅

@DaveGrayTeachesCode 2 месяца назад

I'm asked about AI frequently. I made a video: ru-vid.comc8tUBvaAP1A

@PopCapMusicTrending 2 месяца назад

This was my error yesterday 😂 I went crazy

@DaveGrayTeachesCode 2 месяца назад

You are not alone.

@PopCapMusicTrending 2 месяца назад

@@DaveGrayTeachesCode I found a new solution. I let the backend guy worry about it haha

@jasonjimenez9116 2 месяца назад

This problem with nextjs caching, dev mode vs production mode "mismatch" , is a pain point they really need to solve asap. Why even bother with dev mode, just rebuild and run in production mode. lol

@DaveGrayTeachesCode 2 месяца назад

This is a fair point

@dira4734 2 месяца назад

All this time thinking I can't render server components below client components. When I always used client side providers wrapping the entire app

@DaveGrayTeachesCode 2 месяца назад

Don't feel bad. It isn't intuitive and you aren't the only one. 🙌

@jotasenator 2 месяца назад

subscribed

@DaveGrayTeachesCode 2 месяца назад

Welcome aboard!

@chrisgascoyne2958 2 месяца назад

As much as I like working in next, having to fix the hydration error like that feels so bad and hacky. I mean if it works it works, but y'know...

@DaveGrayTeachesCode 2 месяца назад

Agree!

@otisrancko 2 месяца назад

Will server components work if we run the build command and host them in an NGINX docker container??

@richardflosi 2 месяца назад

Thoughts on Web Components?

@Abilovv599 2 месяца назад

But how to prevent flashing zero?

@DaveGrayTeachesCode 2 месяца назад

You could initialize the state with null

@mosescosme8629 2 месяца назад

I definitely think this is a mess. If I was just getting started as a programmer, I would stay miles away from React. Since I've been at it for 5 years, it was challenging to learn the new paradigm but not impossible. I wish they would have used different terms to make communicating about these changes easier.

@tomfancode 2 месяца назад

We can just create a no ssr component to wrap these elements

@DaveGrayTeachesCode 2 месяца назад

The NoSSR solution is the 2nd one given on the Next.js docs page I reference after the useEffect solution. Link in the description for reference. That said, to be clear for anyone reading this, remember that children can still be server components - many of us think of "children" when someone mentions "wrap" or "wrapping".

@edhahaz 2 месяца назад

The problem: I added 3 npm dependencies and it feels like I've got 10 different paradigms fighting over the project. what the fuck is a babel, vite, webpack, eslint ? and why do I have all of them ?! When the dependency has to wrap the already obfuscated nextjsconfig withDependency(nextconf) I guess you are in for some real shit :)

@CTILET 2 месяца назад

hi Dave)

@DaveGrayTeachesCode 2 месяца назад

Hello 👋

@dev-akeel 2 месяца назад

2:00 Don't use window object directly 4:00 Use useEffect in order to use window object 5:45 Conclusion we should not access any browser object directly without useEffect. Avoid to render those objects conditionally 6:30 You don't need "use client" on top of every file. 7:30 children prop in client component can be a server component. 9:20 Sometimes you need to relod the window to let the changes make effect in dev mode 10:20 Wrapping app in a provider doesn't make whole app client-side.

@DaveGrayTeachesCode 2 месяца назад

Good outline

@mohamedabdiahmmed 2 месяца назад

please add #NextJs to #Vite

@DaveGrayTeachesCode 2 месяца назад

Nice request!

@jasonjimenez9116 2 месяца назад

Nextjs14 is fast turning into the vietnam of react developers.

@user-kl9dx9gi9b 2 месяца назад

Hi! I'm studying English as a second language and I've never heard this expression before, so I was wondering what it means. Would you mind to tell me the meaning of it?

@DaveGrayTeachesCode 2 месяца назад

I believe it is referring to the Vietnam war where the US had soldiers that either didn't return home or came home with PTSD.

@user-kl9dx9gi9b 2 месяца назад

@@DaveGrayTeachesCode thx a lot😁

@ulrich-tonmoy 2 месяца назад

Wheres the solution for these mistakes

@DaveGrayTeachesCode 2 месяца назад

I show them in the video

@RyanThickett 2 месяца назад

This is a really minor thing but it bothered me a lot, you are pronouncing Height weirdly. You keep saying "hithe" instead of "hite", sorry to point it out but I thought I was growing crazy haha

@DaveGrayTeachesCode 2 месяца назад

Yes different parts of the world pronounce things a little differently at times. Or it could just be me 😆

@BrenoCarv 2 месяца назад

Srsly mate, You should really find something useful to do with your life, i mean, u'r really trying to critise someone's pronunciation only cuz it's different than your's? Gosh..

@RyanThickett 2 месяца назад

I understand regional differences, but I do feel that this is just an oversight where you didn't get corrected by anyone, but if you feel no need to change then carry on, just wanted to point it out in case you were interested. @@DaveGrayTeachesCode

@RyanThickett 2 месяца назад

It was done with the intention of helping, sorry you feel this way.@@BrenoCarv

@Airijko Месяц назад

@@BrenoCarvsomeone forgot his meds today

@LehmannMr 2 месяца назад

In would subscribe to this channel, but I am already subscribed to it. 😊

@DaveGrayTeachesCode 2 месяца назад

Right on! 🙌

@kkh0101 2 месяца назад

i thought frameworks are supposed to make things easier. i understand server, client components. you should think of where do you import which component on server or client, this make things easier for me. when it comes to caching, i think nextjs is a terrible solution. it targets a certain type of application that i dont want. i find myself fighting with docs. different behavior of caching on dev and prod builds is just stupid.

@DaveGrayTeachesCode 2 месяца назад

Many feel this pain. 💯