API Routes Tutorial

1. Introduction

In this tutorial, you’ll learn how to define and handle API routes in modern web applications using frameworks like Next.js or Express.js.

2. What Are API Routes?

API routes are endpoints in your application that handle HTTP requests like GET, POST, PUT, and DELETE. They allow your frontend to communicate with your backend securely.

3. Creating a Basic Route

In Next.js, you can create a file under /pages/api/hello.js with the following code:

export default function handler(req, res) {
  res.status(200).json({ message: "Hello API!" });
}

4. Dynamic Routes

You can create dynamic routes by using brackets in filenames like [id].js. Example:

export default function handler(req, res) {
  const { id } = req.query;
  res.status(200).json({ id });
}

5. Handling HTTP Methods

You can control behavior based on HTTP methods:

export default function handler(req, res) {
  if (req.method === 'POST') {
    // Handle POST request
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

6. Final Notes

API routes are essential for creating backend services in full-stack apps. Make sure to secure them and handle all possible edge cases to ensure smooth communication between frontend and backend.