00:00:00 API routes.

00:00:01 Enough with frontend stuff, optimization, caching, performance, and all that.

00:00:06 It's time for some backend work.

00:00:08 If you've ever done some backend, even creating a simple hello world from server message requires a fair bit of setup.

00:00:16 It involves setting up a project, installing necessary packages like Express for Node, writing server code, setting up Express,

00:00:24 the port, and then making that port listen, running it, and then deploying it using some paid or free service so you can finally use it on the frontend.

00:00:34 It might not seem like a big deal when you're just reading or looking at the code, but things quickly start getting complicated when you have to write

00:00:42 various routes, middlewares, and so on.

00:00:44 But in the newest version of Next.js, it's super simple, much closer to what we did on the frontend.

00:00:50 You just create a special file within a folder for the specific route, and you're all set.

00:00:55 There's no need to set up, manage, or monitor an active server separately.

00:01:00 If you want to show the same message, hello world from backend in Next.js, you simply need to create a folder with any name,

00:01:08 and then create a special file named route.ts inside it.

00:01:13 From there, you can immediately begin writing server code.

00:01:16 Export async function get, return response.json, message hello world from backend.

00:01:25 That's all there is to it.

00:01:26 Your folder name serves as your API route name with your business logic neatly encapsulated within this special route file.

00:01:35 If you now go to the browser, modify the URL, and add hello world to it, you'll see hello world from backend as a response.

00:01:43 But how can you create other API endpoints like post, patch, delete, and more?

00:01:48 Well, for that, let's create a book endpoint with a local array as a database.

00:01:53 A common practice when creating route handlers is to create a folder called API and write all the routes inside it.

00:02:01 So, create this API folder in the app directory and add a database file for storing some dummy books.

00:02:09 Then, you can create two routes, get and post, in app-api-books-route.tsx.

00:02:17 These are nested routes similar to what you explored previously in the routing part for the UI.

00:02:23 For the delete and put, you'll have to create dynamic route handlers.

00:02:27 And you already know how to do that.

00:02:29 App, API, books, and then dynamic square brackets ID forward slash route.ts.

00:02:37 And inside of it, you can export async function put for the update request, and then export async function delete for the delete request.

00:02:46 And then you can add the logic.

00:02:48 So far, this feels good.

00:02:50 Similar to what we did with UI routes, but this time for writing server code and creating APIs.

00:02:58 So let's test them one by one to see if they work or not.

00:03:02 And there you go.

00:03:03 Everything works perfectly.

00:03:04 This is how route handlers or APIs work in Next.js.

00:03:09 It's super simple and straightforward.

00:03:12 And the creation of APIs in Next.js was nice, but how can you use them on the UI?

00:03:17 Well, it's a simple fetch.

00:03:19 Just create a books route real quick and call the get API route to fetch the content.

00:03:25 Const response, await fetch, localhost 3000 API books.

00:03:30 You get them from the response, set them to the state, and render them.

00:03:34 If you visit the books route, you'll see all of your books, as easy as it could be, thanks to the serverless architecture of Next.js and React 19 React

00:03:45 server components.