Introduction to Next.js 13+, v2 Contact Form & Server API

Transcript from the "Contact Form & Server API" Lesson

[00:00:00]
>> Let's do this contact form here. So for the contact form. We're going to do the mutation because it's a form so we have to post somewhere so we're going to make an API that receives some input to post to so we can create that form and we can record people contacting us.

[00:00:14] Right so. Let's do that. So inside of our pages directory I'm actually just going to delete, I'm in pages slash API, I'm going to delete this stuff because we don't need it and I'm going to make pages slash API slash. Contact.ts, and I'm just gonna export default handler, Like that?

[00:00:43] Nope. Why did it do that? [LAUGH]? What was that? I need a function. There we go. And it takes a request and a response. And then I'll just say if request dot method, triple equals post, it's all caps. Then let's go to work. So then I'll say, cool, this is where you would save to DB.

[00:01:13] We don't have a DB, so we're not gonna save it to DB. We're just posting to our server. So I'm just gonna respond by to let him know that, gotcha. So I'll say res.json message. Okay, we got it, thank you. All right, so we are good there. And then inside of our contact form, let's make that.

[00:01:36] We'll just say const or export default function contact Return. But wait, if we have to do a mutation, how do we do that in a server component?
>> You don't.
>> We don't? So what do we do with this component?
>> Use client at the top. And then-

[00:01:55]
>> So turn the whole page into a client component. Like this.
>> Could you do router refresh?
>> If we needed to list the thing that you just submitted, yeah, but are you saying, are you suggesting we turn the whole page into a client component?
>> You could probably actually maybe put that in like the button itself.

[00:02:21]
>> You could just do it in the part that's doing interaction. There's no wrong or right way but it is ideal to try to squeeze the client all the way down to the part that's actually doing the client thing versus making the whole page suffer and haven to be the client.

[00:02:36] So I just want you to think about that exercise, that thought exercise. But yeah, we'll just turn the whole page to a client because it's faster. But yeah, you probably don't want to do that in production. So we'll just say cool. Now, this is just the stuff you already know.

[00:02:51] Guess what you can do this thing. You remember this? Look at that. You remember that? It's still there. How's that feel? Yeah, right? Okay [LAUGH] so we got that. Looks good, right? Gimme your email. Actually, it'll just be your string. We won't need it. We won't need that.

[00:03:11] Cool. Got that and it's just a form right here, right, so form on submit that's gonna handle submit. We're just gonna do some thing. Eventually we'll get to that thing and then got that in there, and then we just have an input for your email that's required and its value is email and on change it's going to just do this.

[00:04:05] So set email to e.target.value. Cool, so we got that. And then we need a button. That's type="submit" It says submit. All right, I was gonna do this Either prevent that form for refreshing which honestly this should just be standard. And then we can do whatever we need to do to for our API call here.

[00:04:42] So I'll make this async. Okay. I will just say fetch. Which in this case will just be our URL /api/contact. I can say /api/contact. Wait, can you do relative paths with fetch? I don't think you can. We're about to find out. So we'll do that and then we'll say method 'POST'.

[00:05:16] Post up the body, you gotta stringify it, all this stuff. Email, that type of thing, I think you also got to set the headers if you're doing JSON. Content-Type application/json. Then accept that, okay. All right, cool, so now we've got that, we've got our email. All right, oops.

[00:06:00] Got that. All right, so let's try our contact form. So if we go back home, And let's just put, did I put a log in the API? I didn't, let's do that. Select the body there. All right, I misspelled value. God, I love it. Okay, let's do that again.

[00:06:28] Hello, and there we go. Submitted our form. All right, so other than this looking really bad, we just made our own full stack landing page resume in 20 minutes, right? If you had Tailwind, this would have been even faster, it would have been crazy, yeah.
>> I just had just general question.

[00:06:49] I can work with Three.js and stuff like that, React, Three, Fiber.
>> Nice, I love Three.js.
>> Yeah, so it's fun, but I'm curious, those have to be client components then. I'm not sure how that works.
>> Yeah, so if you bring in, like, do you use React Fiber?

[00:07:04]
>> Yes.
>> Okay. So like when you bring in like, what's a good example with that? Basically all you have to do is like, when you bring in like the camera, the stage, the scene, all that stuff, you need a proxy. You'll have to go to like your components file somewhere and make a component, call it the same thing as the Three JS one, and all it does is an empty component that returns that component and it has used client at the top.

[00:07:30]
>> Got it.
>> That's it. That's why I was like, someone could literally make a babble plugin that does that for third party libraries because that it's gonna be like that for a while until people go update their stuff. I think it's gonna be like that for the next year, probably in the next course, which will be full stack, build an app and full stack next JSV.

[00:07:48] Two, we will be literally building an app from scratch so we'll be covering things like nothing simulated basically we will be using a real database real server real authentication like actually how to sign up and sign out and how you would do that in production. Production optimizations not going too deep, because in another course there will be production grade next year.

[00:08:08] Yes. Where we really go in and fine tune everything to like, work for a huge app. And yeah, we'll be doing it from scratch. So we'll have a conversation around it everyone will be following along. And hopefully you build something that you're proud of, because my goal in that course Is to actually make something that you look out and you're like, wow, this looks good, it feels good and you use it as a reference to build out anything else in the future.

[00:08:32] It's like it's gonna be your go to reference app because it does use realistic stuff.