Introduction: Why Update and Delete?

Welcome back! So far, you have learned how to create new users with POST and fetch a single user with a GET request. In real-world applications, it is just as important to be able to update and delete data. For example, users might want to edit their profile information or remove their account entirely. In this lesson, you will learn how to handle these actions using the PUT and DELETE methods in a Next.js API route.

By the end of this lesson, you will know how to update a user’s information and remove a user from your data store. These are essential skills for building any full-featured backend.


Recap: Our API Route and Data Setup

Before we dive into updating and deleting, let’s quickly remind ourselves of the setup we have been using. We have a simple array of users and a dynamic API route that handles requests for a specific user by their ID.

Here is a quick look at the setup:

  • users is our in-memory array that stores user objects.
  • The route uses a dynamic segment [id] to handle requests for a specific user.

This setup allows us to easily find a user by their ID.


PUT Method: Updating a User

The PUT method is used to update an existing resource. In our case, it lets us update a user’s details. Let’s look at the code for handling a PUT request:

Let’s break this down:

  • We get the user ID from the URL and look for the user in our array.
  • If the user is not found, we return a 404 error with a message.
  • If the user exists, we read the new data from the request body.
  • We update the user’s information in the array, keeping the same ID.
  • Finally, we return the updated user as a JSON response.

Example:
Suppose you send a PUT request to /api/users/2 with this JSON body:

If user 2 exists, the response will be:

If user 2 does not exist, you will get:

with a status code of 404.

⚠️ Important: This implementation assumes you're replacing the entire user object (except for the id). If the client sends only a partial object (e.g., just a "name" field), the email will be lost. This is how the PUT method works: it's designed to fully replace the resource, not partially update it.

DELETE Method: Removing a User

The DELETE method is used to remove a resource. Here is how we handle deleting a user:

Here is what is happening:

  • We get the user ID from the URL and look for the user in the array.
  • If the user is not found, we return a 404 error.
  • If the user exists, we remove them from the array using splice.
  • We return a response with status 204, which means the request was successful but there is no content to return. The 204 status code tells the client: “The resource was deleted successfully, and there's nothing else to show.” This avoids sending unnecessary data back and is more semantically accurate than 200 OK.

Example:
If you send a DELETE request to /api/users/3 and user 3 exists, the response will have status 204 and no content:

If user 3 does not exist, you will get:

with a status code of 404.


How the Frontend Triggers PUT and DELETE

It’s always helpful to see how the browser triggers these backend methods from the UI.

Here’s the simplified version of the update and delete calls from page.tsx:

Summary And Practice Preview

In this lesson, you learned how to update user data with the PUT method and remove users with the DELETE method in a Next.js API route. You saw how to find users by their ID, handle cases where the user does not exist, and return the right responses for each situation.

These skills are essential for building real-world APIs that let users manage their own data. Up next, you will get to practice updating and deleting users yourself. Congratulations on mastering the basics of handling data in a Next.js API!

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal