Creating and using API Routes in Next.js

Since Next.js is built on top of Node.js, it also allows us to define our own API routes. The API routes are functions that are part of the server, but instead of rendering HTML, they're returning JSON data.

Any file inside pages/api is mapped to /api/* and it will be treated as an API endpoint instead of a page. These functions are server-side, and will not bundled with your client-side code. That means we can safely open DB connections, and use secret environment variables.

For new projects, we can build our entire API with API routes, but if we already have an existing API we don't need to forward our API calls through an API route. We could also use API calls if we want to mask our API or an external service (instead of https://mycompany.com/secret-api-url, we can send requests to /api).

To create an API handler, we need to create a file in pages/api and export a default async function:

1// pages/api/user.ts
2
3import type { NextApiHandler } from 'next';
4
5const handler: NextApiHandler = async (req, res) => {
6  return res.status(200).json({ name: 'John Doe' });
7};
8
9export default handler;

The function receives 2 arguments:

• req: An instance of http.IncomingMessage, plus some pre-built middlewares
• res: An instance of http.ServerResponse, plus some helper functions

The req contains the method, body and query properties that we can use to handle the request. Here's how we can handle different HTTP methods in our API:

1const handler: NextApiHandler = async (req, res) => {
2  if (req.method === 'GET') {
3    // process the GET request
4  }
5  if (req.method === 'POST') {
6    // process the POST request
7  }
8};

To get the data sent from the client, we can use the body property:

1const handler: NextApiHandler = async (req, res) => {
2  const { body } = req;
3  // body: { name: 'Lazar Nikolov', profession: 'Software Engineer' }
4
5  if (req.method === 'POST') {
6    // save data (body) in database
7  }
8};