Introduction to Next.js Creating an API

Transcript from the "Creating an API" Lesson

[00:00:00]
>> So we head back over to the stuff here. So here are the routes that we have to make. So basically, is this basic crud, right? We need to be able to create a note. So it'll be a post to /api/note. We need to be able to update a note.

[00:00:12] So it'll be a patch to api/note/:id. We need to be able to delete. So it'll be the same thing, looks like I've left delete on all of these. So we need a delete here which will delete the note. Need to be able to get one note, that'll be a get request.

[00:00:29] Need to be able to get all notes, which will be a get request without the ID. So we'll make all of these. And if you take a look, we really only have two URLs. We have this URL which is api/note. Then we have this URL, which is api/note/:id.

[00:00:44] That's it. They're all just different methods with the same URL. So we'll only need to make two files. We need to make one file for api/note. And then one file for api/note/:id. That's it. Just two files, different methods. And we know that we have the next connect that allows us to do different methods in the same file.

[00:01:04] So that's what we'll do. So we go to API. I'm going to create a new folder here for notes. And then I'm going to make an index here for that file. And then I'm gonna make one for the ID of note which'll be id.js. And boom, we've got our two files for that.

[00:01:26] And then if you want, you can follow along and you can copy this up. I probably just write this up all by hand. Some helper functions here on my copy. But the one thing is we're not going to get into databases and stuff for this course. I think it would just be a distraction.

[00:01:41] So we're going to do some stuff in memory right now. So at least we get some real data. So what you can do is you can just copy this file right here. And you can add it to a file called source/data/data.js. I'm going to do that. So source, make a new folder, call it data.

[00:02:00] And inside of there is add data.js, Like that, I'm just gonna paste that in. Literally, just in memory array of notes, nothing flashy here. It is important though, you've gotta do a module.exports. Don't do the ES6 export, otherwise it won't persist. It won't be like a live object.

[00:02:20] So do the module that exports. Cool, so then now let's go ahead and build up these handlers here. So I'll import nc from next-connect. And then I'll make a handler. And I'll just export, Default, the handler. And then I know I'm gonna need the notes in here. So I'll just import the notes from, where's it at?

[00:02:58] Source, there we go. So src/data/data like that. So I got my notes. Okay, cool. So if we're in the index file, we go back. We know we need to do a POST to create a new note. And then we need to, it says DELETE but it should be GET.

[00:03:15] We need to do a GET to get all notes. So we'll just do that. So we'll say this'll be the post. This will be to create the notes, so request response here. And then we need a get to, Get all the notes. So if we wanted to create a note, we'll just assume whatever is on the body is what's going to be a note.

[00:03:38] We're not going to be too strict. So I'll just say, notes is whatever is on request.body. If you've never used Express before, in this case, because there's some middleware that's being used. Whatever's on the incoming request.body is whatever they post it to the server, in the body field or the data field.

[00:03:59] Or whatever libraries are gonna front end. So we direct our body and then I just need to add ID. Let's use the date, Date.now is good for ID. And then I'll just say notes.push into our database of notes like that. And then I'll just say res.json data note.

[00:04:21] So I'll send back that note. And then boom, we just created a note. Very simple there. And the next thing is I want to get all the notes. So this one's very simple. I'm going to say res.json data and just put notes. There we got all the notes, okay?

[00:04:41] So we can go try this out and see what happens. So if I go back here to http py, I could say HTTP. I could say post. And then I could say, actually what's the best way? Actually the best way, there's so many ways in JSON. I think we can do, I think this one's better for me.

[00:05:01] So I'll just say echo, Like this and I can add some JSON. So I'll say echo and then I'll put some, Let's see. I'll put a name on the to do or maybe or the note maybe a title. So the title, I'll say, this is the title. And then I can pipe this to http like this.

[00:05:27] If you have any other API client like insomnia, or is it insomnia, insomnia, postman, they all work, I just like to do it from the CLI. You can even use curl. I just don't know how to use curl. So I'm using HTTPy, so I'll post to 3000/api/note. And boom, we get back the note that we created.

[00:05:52] Just like that, it works very well. And then I should be able to get all notes, right? So I should be able to say, cool then just give me all the notes. And then boom, we get back an array of all the notes which is just one that I created, right?

[00:06:07] So if I create some more, Then I go back and get them all. They'll all be there. All right, very simple, super simple API. Works like magic. Pretty amazing, I love it. The next ones we want to do is we will be able to do the update, the delete, and then the get one.

[00:06:29] And that's all going to be in ID because we need an ID to update. We need an ID to delete and we need ID to get one. So, let's do the same thing. I'm gonna copy most of this, bring it over here, and then we're gonna have a patch instead of a post.

[00:06:44] And that's going to get one but I'm actually just going to go ahead and copy some of this code out here. Because I have yeah, actually I'm just gonna copy all this, cuz I forgot I got some stuff in here that handles the nuances of checking those IDs.

[00:07:00] Wow, this file is big. Let me zoom out. This one's pretty much the same. The reason I copied this cuz there's like some logic in there with the dates. When they get sent up in the string in the URL parameter actually strings. Whereas they're saved in the database as numbers so the quality check doesn't work until you pass in.

[00:07:20] So that's what that is, but as you can see for to get one. Here's what I really wanted to show you. Does this look familiar? request.query.id, let's take a look at this page for id in a JSX file. Look at that, there's a query property here where we also got the ID.

[00:07:39] It's the same thing. It's the exact same thing. So if you go here, you also get this query. And the reason I'm saying that is because if you used Express, typically, you would get the ID from rec.params. Because it's a parameter in the URL and not a query string.

[00:07:55] And that's where you would get it from. But in this case, it's going to be on the query objects. There's not actually going to be a params object inside of here. So that's a big difference. If you tried to do params, it would just be like, bleah, it's undefined.

[00:08:08] So it's actually on the query, and that's the exact same thing on the front end, which is also the query. And the parameters will be in there and there'll be the exact same format as they are on the front end. So if you had a catch all this will be an array of parameters.

[00:08:21] That'll be the same thing. So I think that uniformity and that convention is just nailing it all. That's pretty dope. So anyway, I get the note. On the get request, if it's not a note I'll 404, if it is I send it back. For patch I do the same thing, I just merge whatever you sent up, and then I send it back.

[00:08:39] And then for delete, I literally just splice it out of memory. That's it, nothing crazy here. So now we're able to do some crud stuff on here. So if I take this ID here like this, I should be able to say give me that. And looks like that broke because resolver is not a function.

[00:09:08] What? I don't have a resolver in here. Let's see. Looks like some internal thing that broke because of something I did. Let's just restart it and see what happens. All right, so now let's try to run this again. So if I do a get requests to this. Okay, I get the same.

[00:09:39] Wait, no, I get a not found this time. Okay, so obviously this is not gonna be found because I just restarted the server. And I deleted every note in memory so there's not gonna be any here, right? So I would have to create some more like that. And like that, maybe grab that ID like that.

[00:09:57] And then now I should be able to do this and boom, there we go. So I was able to get that one to do. If I wanted to delete it, I could do this. I could say delete that single note, and you can see it deleted it. And then the last one is an update, which kinda looks like this.

[00:10:21] So I can take this ID here. And then I can do this, change this to a patch. Put this ID here, and then just offer an update like, New title. And then boom, new title, right? So super easy crud rest app out of the gate. Didn't have to do anything but make some files.

[00:10:49] Very simple, very easy, works very well, deploys very easily. Now, any questions on that? Is anyone not impressed with Next.js yet? [LAUGH] Like this thing is I dunno, it's crazy. I'm just thinking about when they sat down and made this. Is this what they thought it was gonna be or did it just turn into it?

[00:11:18] Because when I make open source, I'll have an idea about something and I'll make it. And halfway through I'm like, wait, no, wait, no, it's gonna do a lot more. And then like, it'll just like go into something else and then I never finish it. But, [LAUGH] I don't know, I'm always just curious like how people come up with this stuff.

[00:11:34] Usually if it's something good, that person or that team experienced a lot of pain before they did it. It's so much pain that they spent so much time making this because that's how much pain they felt. So I'm always like, what did they have to go through to make something like this?

[00:11:47] I feel bad for them, but thankfully they did it for us. So awesome. All right, here's my favorite part.
>> There's a question.
>> Yes.
>> Maybe you're gonna get to it but interacting with your API or consuming your API and pages.
>> Yeah, yeah, we're gonna get to that.

[00:12:06] I mean, technically right now, you already know how to do that, right? If you know how to fetch content, inside of a react. If you know how to hit an API inside of a react component, then yeah, just hit your API. In this case, it's localhost:3000/api. You can do that anywhere in your react components right now, and that'll be happening on the client.

[00:12:27] So I won't be covering that too much because I think we all know how to do that. But what I will cover in this next section is how to fetch data with Next.js' specific ways of fetching data, and what they actually mean. I actually believe this next session is what defines the Next.js.

[00:12:41] I think, you know, you have the pages. And I think that gives Next.js some identity for sure. But other frameworks are kinda doing that too. But this next section is literally, I think, what defines the Next.js in my opinion. And I think it's one of the things they spent most of the time on getting right, and I think they nailed it.

[00:12:58] So you're gonna see. But yeah, you could totally fetch those in your components right now.