Master API Routes in Next.js with This Detailed Guide

Hi Guys! In this blog I want to share with you all about API's in Nextjs, how to build and manage them.

Looking at it from a development side, it makes our work a whole lot easier for us to just write the frontend and backend in the same project and if the project is of small-medium size, It becomes a boon to just write the whole project in one framework and deploy it and voila it is live and working!!!

It actually hides a lot of complexity from us as the frontend code is sent to the client's browser and the backend code is there on the server and with whole lot other features like Server-Side Generation of static pages(SSG) ,server components and many more!!!!

To Know more about SSG and SSR read my blog here. Link

To Know more about Server Components and Client Components in Nextjs.Link

Let's dive deep into the API's that we are going to learn about in this guide about API's in Nextjs!

In this Guide we are going to use the latest app router in the src directory, and we'll also be using Typescript and TailwindCSS

Firstly we have to install and start the basic template provided in Next js.

Read How to get started in Nextjs here. Link

After installing all the dependencies and starting our nextjs server the file structure will look like this.

Remember that Nextjs uses File based Routing i.e you have to be careful how you manage files.

In app folder is where our all the code will reside.

Here we will start by making an api folder which will contain our all the API's that we'll be creating. It is not necessary to name the folder api but for better industry practices and for clear understanding of the structure of code, we are going to go with this.

After making this folder whichever route we want we can make a folder for that and inside that folder we need to make a file with the name route.ts. It is very important that you name the file route only.

Now I've made some routes which you can see above

GET /api/employees : In this route I am getting all the employees data

GET /api/employees/:id : In this route I am getting a specific employee

In the /employee route there is a page.tsx which denotes that this will be a component which will be rendered and if you write route.ts , this will denote that this is an API.

Remember you cannot write route.ts and page.tsx in the same folder that will cause conflicts

This is how you write a GET request.

Here we have used a dummy api to get dummy data but you can use your own mongodb or postgresql database to store data and get using any ORM or ODM, everything is present in NEXTjs to build your complete webapp

To read more about fetch in Nextjs , read here. Link

After this I have made the necessary frontend to call these API's and display it on the user's screen

This is the page where I have called the first api and got all the customers. I have made this a Server Component so the Page is made on the server in the runtime when the page is requested.

Here I have called API for a specific employee and got a single employee.

Want to read more about SSG vs SSR, Read here. Link

You can also make route groups for better organizing your file structure. You can read about dynamic routes here. Link

Next.js provides many inbuilt features and apis to use which hides a lot of complexity.

Github Repo for this project

Thank you for reading!! I am very excited to publish my first blog on Hashnode! Please let me know your thoughts in the comments 😋