How to Create a DELETE API in Next.js API Routes

In Next.js, create a DELETE API by defining an API route file in the pages/api folder and handling the DELETE HTTP method inside the exported function. Use req.method === 'DELETE' to detect the request type and respond accordingly.

Syntax

In Next.js API routes, you export a default function that receives req (request) and res (response) objects. You check req.method to handle different HTTP methods like DELETE. Use res.status(code).json(data) to send a response.

• req.method: The HTTP method of the request (GET, POST, DELETE, etc.)
• res.status(code): Sets the HTTP status code for the response
• res.json(data): Sends JSON data as the response

javascript

export default function handler(req, res) {
  if (req.method === 'DELETE') {
    // handle delete logic here
    res.status(200).json({ message: 'Deleted successfully' });
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

Example

This example shows a Next.js API route that deletes an item by ID from a simple in-memory array. It handles only DELETE requests and returns appropriate responses.

javascript

let items = [{ id: '1', name: 'Item One' }, { id: '2', name: 'Item Two' }];

export default function handler(req, res) {
  if (req.method === 'DELETE') {
    const { id } = req.query;
    const index = items.findIndex(item => item.id === id);
    if (index === -1) {
      res.status(404).json({ error: 'Item not found' });
      return;
    }
    items.splice(index, 1);
    res.status(200).json({ message: `Item with id ${id} deleted` });
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

Output

If you send a DELETE request to /api/items?id=1, the response will be:
{
  "message": "Item with id 1 deleted"
}

Common Pitfalls

• Not checking req.method and handling unsupported methods can cause unexpected behavior.
• Forgetting to parse query parameters like id from req.query.
• Modifying data without proper validation or error handling.
• Not sending a response for all code paths, which can cause the request to hang.

javascript

export default function handler(req, res) {
  // Wrong: No method check
  // This will respond to all methods the same way
  res.status(200).json({ message: 'This is not correct' });
}

// Correct way:
export default function handler(req, res) {
  if (req.method === 'DELETE') {
    // delete logic
    res.status(200).json({ message: 'Deleted' });
  } else {
    res.status(405).json({ error: 'Method not allowed' });
  }
}

Quick Reference

Remember these key points when creating a DELETE API in Next.js:

• Use pages/api/yourroute.js to create API routes.
• Check req.method === 'DELETE' to handle delete requests.
• Access query parameters via req.query.
• Send responses with res.status().json().
• Return 405 Method Not Allowed for unsupported methods.

Key Takeaways

Create API routes in Next.js under the pages/api folder.

Check req.method to handle DELETE requests specifically.

Use req.query to get parameters like IDs for deletion.

Always respond with appropriate status codes and messages.

Return 405 status for unsupported HTTP methods.