Build a Fullstack App with Next.js, v2 Card & Input Components

[00:00:00]
>> Okay quick little card component isn't super easy it's probably not even worth going through but we need to make it. So make a new one card TSX and we can just copy it. There's really nothing new to learn from this card component but it is very necessary for our app.

[00:00:21] It's using CLSX here again, which again just literally just puts these two strings together because I don't want to do backticks and I don't want to use a plus sign. So I use that instead. Okay? Any questions on that? Input, very much the same, we got the input, I don't think there's really, actually, inputs a little different.

[00:00:59] Let's see if someone catches this. We'll make an input one here. There's so many ways you can do this. Okay. Let's think about this one. There's really no wrong answer on this one. So we just had a conversation about when do we use client components? Well, inputs are things that require interaction, no?

[00:01:28] Would this be a good example for a client component? Yes, yeah it could be I mean usually if you have an input it's probably a control component where you have state a hook on change something like that. And you could do that here but if you notice I don't have any of that here.

[00:01:54] It's gone, right? I've practiced the art of, the zen of like moving everything far away from components and trying to squeeze them down at the smallest level. So I can almost never have to use client components. That's what I've been practicing. So this input, although could be controlled and have a value.

[00:02:20] It isn't defined here. It's only passing as a prop so it can remain a server component and push that responsibility somewhere else. But yes, if you wanted to define your state hooks and your use effects and bind all that stuff here, you would absolutely have to go up here and say, use client.

[00:02:42] But I think that's the responsibility of the form, in my opinion. I think the form should have the state and all that stuff and pass it into the input and not the inputs themselves. Because then if you do that, you actually like run into so many problems when you start using multiple versions of that input.

[00:02:57] So I think that's the responsibility of the form. So like a form is probably a component that's always going to be a client component. I don't think that's ever going to be a server component. Because why do you have a form if you're not gonna let people like, interact with it?

[00:03:11] So and you can't really interact with it if it's a server component.