Nextjs Handling Http Methods In Api Routes Complete Guide

1. What are API routes in Next.js?

Answer:
API routes in Next.js allow you to create serverless functions that can handle API requests directly from your Next.js application. They enable you to create backend endpoints without leaving the directory structure of your Next.js app, making it easier to manage both frontend and backend logic.

2. How do I create an API route in Next.js?

Answer:
To create an API route, you need to add a file inside the pages/api folder. For example, if you want to create an endpoint at /api/hello, you would create a hello.js file inside the pages/api folder. Here’s a simple example:

// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ name: 'John Doe' })
}

3. What HTTP methods can be handled by Next.js API routes?

Answer:
Next.js API routes support all standard HTTP methods such as GET, POST, PUT, DELETE, PATCH, HEAD, and OPTIONS. You can choose to handle any specific method(s) as needed.

4. How do you handle different HTTP methods in a single API route?

Answer:
You can handle different HTTP methods by checking the req.method property within the handler function. Here’s how you can handle both GET and POST requests in the same route:

// pages/api/data.js

export default function handler(req, res) {
  if (req.method === 'GET') {
    // Handle GET request
    res.status(200).json({ data: 'This is a GET request response' });
  } else if (req.method === 'POST') {
    // Handle POST request
    const { name } = req.body;
    res.status(201).json({ message: `Data received: ${name}` });
  } else {
    res.setHeader('Allow', ['GET', 'POST'])
    res.status(405).end(`Method ${req.method} Not Allowed`)
  }
}

5. Can you provide an example of handling a PUT request?

Answer:
Below is an example of how to handle a PUT request. This would typically be used to update resources.

// pages/api/updateItem.js

export default async function handler(req, res) {
  if (req.method === 'PUT') {
    const { id, value } = req.body;
    // Logic to update the item with the given id and value
    await updateItemInDatabase(id, value);
    res.status(200).json({ message: 'Item updated successfully', id, value });
  } else {
    res.setHeader('Allow', ['PUT'])
    res.status(405).end(`Method ${req.method} Not Allowed`)
  }
}

6. How to handle DELETE requests in Next.js API Routes?

Answer:
Similar to other methods, you can check for the DELETE method and perform deletion operations inside the handler function.

// pages/api/deleteItem.js

export default async function handler(req, res) {
  if (req.method === 'DELETE') {
    const { id } = req.query;
    // Logic to delete the item with the given id
    await deleteItemFromDatabase(id);
    res.status(200).json({ message: 'Item deleted successfully', id });
  } else {
    res.setHeader('Allow', ['DELETE']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

7. Is it possible to handle multiple routes in one file with Next.js API routes?

Answer:
While you can technically write conditional logic to handle different routes within the same file, it's generally recommended to separate each logical endpoint into its own file for better maintainability and readability. However, in scenarios where routes are closely related and the logic is very minimal, you could do something like this:

// pages/api/items.js

export default async function handler(req, res) {
  const { action } = req.query;

  if (action === 'fetch' && req.method === 'GET') {
    // Fetch items
  } else if (action === 'create' && req.method === 'POST') {
    // Create item
  } else if (action === 'update' && req.method === 'PUT') {
    // Update item
  } else if (action === 'delete' && req.method === 'DELETE') {
    // Delete item
  } else {
    res.setHeader('Allow', ['GET', 'POST', 'PUT', 'DELETE']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

8. How do you handle errors/exceptions in API routes?

Answer:
Handling errors in API routes is similar to regular JavaScript error handling. Use try-catch blocks to catch any exceptions. Set appropriate status codes and JSON responses to indicate errors.

// pages/api/errorHandling.js

export default async function handler(req, res) {
  try {
    // Code that may throw an error
    const item = await fetchItemById(req.query.id);
    
    if (!item) {
      return res.status(404).json({ error: 'Item not found' });
    }

    res.status(200).json({ item });

  } catch (error) {
    console.error(error);
    res.status(500).json({ error: 'Internal Server Error' });
  }
}

9. How to work with query parameters and body data in API routes?

Answer:
You can access query parameters via the req.query object and body data via the req.body object. Note that if using GET, there is no req.body.

Here's an example:

// pages/api/item.js

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { name, description } = req.body; // body data
    // Code to handle POST request
    res.status(201).json({ name, description });
  } else if (req.method === 'GET') {
    const itemId = req.query.id; // query parameter
    // Code to handle GET request
    res.status(200).json({ id: itemId });
  } else {
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

10. How do you secure your Next.js API routes?

Answer:
Securing API routes in Next.js involves implementing authentication, input validation, rate limiting, and sanitization. Below are some approaches:

• Authentication: Use JWT, OAuth tokens, session cookies, etc., to authenticate the user before performing actions.
• Input Validation: Validate user inputs strictly to prevent SQL injection, XSS attacks, etc. Libraries like Joi are popular for schema description and data validation.
• Rate Limiting: Limit the number of requests a client can make in a certain period of time. Packages like next-rate-limit can help implement rate limiting.
• Sanitization: Sanitize inputs to ensure they do not contain any unwanted or harmful data.
• HTTPS: Always deploy your API over HTTPS to encrypt data transmitted between client and server.

Example using Joi for input validation: