Introduction to Next.js Creating API Routes

Transcript from the "Creating API Routes" Lesson

[00:00:00]
>> API routes. This is where it gets crazy, what is this next.js thing? Yeah, it gets crazy, this is where it flexes a little bit, it just kind of shows off. So yeah, API routes, and I talked about a little bit but yeah, next.js is a full-stack framework.

[00:00:16] So fullstack as in it has a server too. And I'm not just talking about the server it uses for development. No, it's a webpack dev server. I'm not also talking about the server uses to render your pages. Because yeah, it does have that, but I'm literally talking about you can make an API, and serve data right next to your code like a monolith, basically.

[00:00:38] And it does it in a way where you don't have to worry about which framework you're gonna use on the server. So not only does it help you get started on the front end to build things faster using something like React. It actually helps you get started on the back end by just creating handlers.

[00:00:54] You don't have to create routes. You don't have to create anything. You just make the handlers, which you can think of them as the components of the back end, right? So it's really beautiful how it works, actually. And you probably already know how it works because we've been doing it this whole time.

[00:01:08] So if you wanna make API routes in Next, which I do recommend doing if you have an API that's only gonna be used by the app that you're making. Then I'd say say, you should just put it there. All you have to do is head over to your pages like this.

[00:01:26] Make a new folder inside of the pages and you call it API. That's it. So now everything that you put inside, I don't know, it may be a folder. What is that? That's supposed to be an API? What is that? I don't know. [LAUGH] It reminds me of the green slime from Nickelodeon back in the day as a reminder.

[00:01:48] So anything we put inside of the API is going to be a route, it's an endpoint that we hit on our API, very similar to the way that we added pages inside of pages. So again, this also hints at that you can't name anything, you can't just put whatever name you want inside the pages.

[00:02:06] So we know we can use _app for a page. And now we're learning we can use API for a page. So we have an actual page called API. This isn't gonna work for you. [LAUGH] I'm pretty sure you can change this configuration in the next config. But I would just maybe just change your route and put it in a sub path somewhere, so that way doesn't conflict with this.

[00:02:27] Cuz I think if the API is not on the route of pages, it's fine. And if we put API inside of notes, I think you're good to go there. But putting it here, no, it's gonna treat it is an API. So that's how that works. And then as far as, how do the routing work?

[00:02:41] The exact same way as pages. The exact same syntax. So for instance, if I were to make a route to the index of my API, guess what I'd have to make? Index.js, and now I can go to /API and do a request there once I actually fill this out, and we'll talk about that in a minute.

[00:03:01] If I want to make some sub-paths here, for instance, I know for our note taking app, I think I have it listed down here, or is that Next? Yeah, I think that's the Next. Yeah, we'll get there. So for a note taking app, we're gonna have /notes and stuff like that.

[00:03:18] It's the same thing. So if I have user, and then I wanna be able to get all the users. So I'll make an index for that. And then maybe I just wanna get one user by an ID. So I'll say give me the ID of that user. It's the same thing.

[00:03:34] It's the same thing as the routes. May even have the catch all routes too, so everything's exactly the same. But this allows us to do an API rally. So pretty powerful. And that's how you create the routes. And when you start it up, you're gonna get those routes as well.