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.

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!

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

@DaveGrayTeachesCode

Ай бұрын

Thank you!

Thanks for the content. You help so much.

@DaveGrayTeachesCode

2 ай бұрын

You're welcome 🙌

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.

Awesome video, thank you!

@DaveGrayTeachesCode

2 ай бұрын

You're welcome!

Thanks for the informative video Dave. May God bless you

@DaveGrayTeachesCode

2 ай бұрын

You're welcome!

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.

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

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 😋

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

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

@DaveGrayTeachesCode

2 ай бұрын

It can feel that way

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!

Great Video!

Good stuff, thank you

@DaveGrayTeachesCode

2 ай бұрын

You're welcome!

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

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.

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

Thanks, great video

@DaveGrayTeachesCode

2 ай бұрын

You're welcome!

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

@DaveGrayTeachesCode

2 ай бұрын

Glad to help

Thanks Dave 👍

@DaveGrayTeachesCode

2 ай бұрын

You're welcome!

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

@DaveGrayTeachesCode

2 ай бұрын

Glad to hear that

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

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!

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

thanks man ❤️💓

@DaveGrayTeachesCode

2 ай бұрын

Welcome! 🙌

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

Thanks!

@DaveGrayTeachesCode

2 ай бұрын

Thank you for the support!

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

Awesome ❤

Thank you♥

@DaveGrayTeachesCode

2 ай бұрын

Welcome!

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

@DaveGrayTeachesCode

2 ай бұрын

True!

Thanks sir

By now I've faced all of these mistakes.

@DaveGrayTeachesCode

2 ай бұрын

You are not alone.

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.

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

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

Context sometimes works unpredictable. Like separate from project.

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. 🙌

Can pre render be opted out of?

@DaveGrayTeachesCode

2 ай бұрын

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

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.

You are the best/ Thx

@DaveGrayTeachesCode

2 ай бұрын

Thank you!

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

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?

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: kzread.infoc8tUBvaAP1A

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

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!

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".

subscribed

@DaveGrayTeachesCode

2 ай бұрын

Welcome aboard!

But how to prevent flashing zero?

@DaveGrayTeachesCode

2 ай бұрын

You could initialize the state with null

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

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

Thoughts on Web Components?

hi Dave)

@DaveGrayTeachesCode

2 ай бұрын

Hello 👋

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

please add #NextJs to #Vite

@DaveGrayTeachesCode

2 ай бұрын

Nice request!

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😁

Wheres the solution for these mistakes

@DaveGrayTeachesCode

2 ай бұрын

I show them in the video

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

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

@DaveGrayTeachesCode

2 ай бұрын

Right on! 🙌

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. 💯

Thanks sir

@DaveGrayTeachesCode

2 ай бұрын

Welcome!