Next.js API Routes Guide

Welcome to this beginner-friendly guide on Next.js API routes. Next.js is a popular React framework used for building server-rendered, statically generated, and performance-optimized web applications. API routes in Next.js allow you to create server-side APIs that can be used to handle requests and send responses. In this tutorial, we will cover the basics of API routes in Next.js and provide examples of how to use them.

Introduction to API Routes

API routes in Next.js are server-side routes that allow you to handle requests and send responses. They are similar to page routes, but instead of rendering a page, they return data in a format such as JSON. API routes are useful for creating RESTful APIs, handling form submissions, and more.

// Example of a simple API route
import { NextApiRequest, NextApiResponse } from 'next';

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  res.status(200).json({ message: 'Hello from API route!' });
};

export default handler;

Creating API Routes

To create an API route in Next.js, you need to create a new file in the `pages/api` directory. The file name will be used as the route name. For example, if you create a file called `users.js`, the route will be `/api/users`.

// Example of creating an API route for users
import { NextApiRequest, NextApiResponse } from 'next';

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ];
  res.status(200).json(users);
};

export default handler;

Handling HTTP Methods

API routes in Next.js can handle different HTTP methods such as GET, POST, PUT, and DELETE. You can use the `req.method` property to determine the HTTP method used to make the request.

// Example of handling HTTP methods
import { NextApiRequest, NextApiResponse } from 'next';

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  switch (req.method) {
    case 'GET':
      // Handle GET request
      res.status(200).json({ message: 'GET request' });
      break;
    case 'POST':
      // Handle POST request
      res.status(201).json({ message: 'POST request' });
      break;
    default:
      // Handle other HTTP methods
      res.status(405).json({ message: 'Method not allowed' });
  }
};

export default handler;

Using API Routes with Parameters

API routes in Next.js can also use parameters. You can use the `req.query` property to access the query parameters.

// Example of using API routes with parameters
import { NextApiRequest, NextApiResponse } from 'next';

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  const { id } = req.query;
  res.status(200).json({ message: `User with ID ${id}` });
};

export default handler;

Connecting to a Database

In a real-world application, you would likely want to connect to a database to store and retrieve data. Next.js provides a built-in support for connecting to databases using the `next/connect` module.

// Example of connecting to a database
import { NextApiRequest, NextApiResponse } from 'next';
import { connectToDatabase } from '../../lib/db';

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const db = await connectToDatabase();
  const users = await db.collection('users').find().toArray();
  res.status(200).json(users);
};

export default handler;

Best Practices for API Routes

When building API routes in Next.js, it’s essential to follow best practices to ensure your APIs are secure, scalable, and maintainable. Some best practices include validating user input, handling errors, and using authentication and authorization.

// Example of validating user input
import { NextApiRequest, NextApiResponse } from 'next';
import { validate } from 'joi';

const schema = {
  name: 'string',
  email: 'string',
};

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  const { error } = validate(req.body, schema);
  if (error) {
    res.status(400).json({ message: 'Invalid input' });
  } else {
    // Handle valid input
    res.status(201).json({ message: 'User created' });
  }
};

export default handler;

In conclusion, API routes in Next.js provide a powerful way to build server-side APIs that can handle requests and send responses. By following best practices and using the features provided by Next.js, you can build scalable and maintainable APIs that meet the needs of your application.