In this video, Adrian discusses API routes in Next.js, focusing on backend development. They explain how to create API routes in Next.js by simply creating special files within specific folders, eliminating the need for setting up and managing a separate server.
Be the first to share your thoughts and start the conversation.
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.
By logging in, you'll unlock full access to this and other free tutorials on JSM Pro.
Why? Logging in lets us personalize your learning experience, track your progress, and keep you in the loop with new workshops, coding tips, and platform updates.
You'll also be the first to know about upcoming launches, events, and exclusive discounts.
No spam—just helpful content to level up your skills.
If that sounds fair, go ahead and log in to continue →
Enter your name and email to get instant access
In this lesson, we explore the simplicity of creating API routes in Next.js compared to traditional backend setup. Instead of dealing with the complexities of setting up a server, you can effortlessly create server-side functionality using a simple file structure within your Next.js application.
route.ts file, encapsulating business logic within.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.