Next.js API Routes: Create Serverless API Endpoints with Ease

Introduction

Creating APIs can be difficult, but Next.js API Routes make it much easier. Next.js is a popular framework that brings server-side rendering and other features to React applications. Its API Routes feature makes it easy to create serverless APIs and endpoints.

In this article, we’ll cover how to create a route, their benefits, and advanced features such as serverless functions, query parameters, and middleware.

Benefits of Next.js API Routes

Next.js API Routes offers several benefits over traditional approaches to creating APIs:

• Easy setup and maintenance: Next.js API Routes eliminates the need for separate servers, making it easy to set up and maintain.
• Automatic serverless functions: These routes automatically become serverless functions, making them highly scalable and cost-effective.
• Seamless integration: With this type route, you can easily integrate APIs with other parts of your Next.js application.

Creating a Simple API Route

To start creating our serverless routes create a new Next.js project by running:

npx create-next-app my-app
// folow the steps and create a simple project with src direcrtory
cd my-app
npm run dev

Let’s create a simple example that returns a “Hello World” message. Here’s how to do it:

// ./pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello World' })
}

This creates an API route called /hello and implements the handler function to define the logic that should run when the API is called. In this example, we return a JSON object with a message key and value of "Hello World".

Handling Query Parameters

Next.js API Routes make it easy to handle query parameters. Here’s an example:

// ./pages/api/hello.js
export default function handler(req, res) {
  const {
    query: { name },
  } = req

  res.status(200).send(`Hello ${name}!`)
}

In this example, we’re destructuring the name parameter from the query property of the req object. When users issue a request like http://localhost:3000/api/hello?name=John, the API returns “Hello John!”.

Serverless Functions with Next.js API Routes

Next.js Routes automatically become serverless functions when they’re deployed, which makes them highly scalable and efficient. You don’t need any additional configuration to use serverless functions with Next.js API Routes.

Advanced Features of Next.js API Routes

Next.js API Routes also supports a range of advanced features, such as middleware, request body handling, and more.

Middleware

Middleware is functions that run before the main handler of an API route. They can be used to modify the request or response objects, perform authentication, logging, error handling, and more. Next.js provides some built-in middleware such as next-connect and next-cors, but you can also create your own custom middleware using plain JavaScript or TypeScript.

Some of the advanced features of Next.js API routes are:

• Data fetching: You can use getServerSideProps or getStaticProps to fetch data at build time or request time and pass it to your API route handler as props.
• Incremental static regeneration: You can use revalidate option in getStaticProps to update your static pages without rebuilding your entire app. This way, you can serve fresh data to your users without sacrificing performance.
• Preview mode: You can use setPreviewData and clearPreviewData to enable or disable preview mode for your API routes. Preview mode allows you to bypass the cache and see the latest changes in your data source without affecting other users.
• Middleware chaining: You can use next-connect to chain multiple middleware functions together and create a modular and reusable API route handler.

Here is an example of an API route that uses middleware and advanced features:

// pages/api/hello.js
import nextConnect from 'next-connect';

// A custom middleware function that logs the request method and url
const logger = (req, res, next) => {
  console.log(`${req.method} ${req.url}`);
  next();
};

// A custom middleware function that checks if the user is authenticated
const auth = (req, res, next) => {
  const token = req.headers.authorization;
  if (token === 'secret') {
    next();
  } else {
    res.status(401).json({ message: 'Unauthorized' });
  }
};

// A handler function that returns a greeting message
const handler = (req, res) => {
  res.status(200).json({ message: `Hello ${req.query.name || 'world'}!` });
};

// Create a next-connect instance and use the middleware functions
const apiRoute = nextConnect()
  .use(logger) // Use logger middleware
  .use(auth) // Use auth middleware
  .get(handler); // Use handler function for GET requests

// Export the apiRoute as the default export
export default apiRoute;

Handling Request Body

Next.js API routes are a convenient way to create server-side endpoints for your web application. You can use them to handle requests from the client side, such as submitting a form or fetching some data. To access the request body in an API route, you need to use a middleware function that parses the incoming data and attaches it to the req object. For example, if you want to handle JSON data, you can use the built-in next/json middleware:

import { withApiHandler } from 'next/json'

export default withApiHandler((req, res) => {
  // req.body contains the parsed JSON data
  console.log(req.body)
  // do something with the data
  res.status(200).json({ message: 'Success' })
})

References

• Next.js Documentation (https://nextjs.org/docs/api-routes/introduction)
• Serverless Functions(https://vercel.com/docs/concepts/functions/serverless-functions)
• Express.js Middleware (http://expressjs.com/en/guide/using-middleware.html)
• Handling HTTP Request Body in Next.js API Routes(https://nextjs.org/docs/api-routes/request-helpers)

In conclusion, Next.js API Routes make it easy to create serverless APIs and endpoints. With Next.js’s automatic serverless functions, easy integration, and simple setup, it’s a great choice for building APIs. Advanced features such as middleware, handling request bodies, and authentication make it even more powerful. This guide should serve as a starting point for working with API, and the references provide further resources to explore.

If you are interested to read more about Next.js check out my previews article “Next.js for Beginners: A Comprehensive Introduction to the Next.js Framework”