Introduction: Why PATCH?

Welcome to the final lesson of this course! So far, you have learned how to create, fetch, update, and delete user data using different HTTP methods in Next.js API routes. In this lesson, we will focus on the PATCH method.

PATCH is used when you want to update only part of a resource, not the whole thing. This is different from PUT, which usually replaces the entire resource with new data. PATCH is helpful when you only want to change a few fields, such as updating just a user's email or name, without affecting the rest of their information.

For example, if you have a user profile and only want to update the user's email address, PATCH lets you do that without sending all the other user details again.

How PATCH Works: Partial Updates In Action

PATCH is all about making partial updates. Think of it like editing a form: if you only want to change your phone number, you don’t need to rewrite your whole profile — just update the phone number field.

When you send a PATCH request, you include only the fields you want to change. The server then updates just those fields, leaving everything else as it was.

For example, if a user has this data:

And you send a PATCH request with:

The server will update only the email field. The name stays the same.

PUT vs PATCH: Why They’re Not Interchangeable

Both PUT and PATCH can be used to update data, but they behave differently:

  • PUT replaces the entire object with a new one. If you forget to include a field, it may get wiped out.
  • PATCH only updates the fields you provide, leaving all other data untouched.

Use PATCH when:

  • You want to change only a few fields (e.g., just the email) = You want to avoid sending large payloads repeatedly

Use PUT when:

  • You want to reset the entire object
  • You can guarantee the full object will always be sent in the request
Step-by-Step: Writing a PATCH Handler in Next.js

Let’s look at how to implement PATCH in our Next.js API route. Here’s the relevant part of the code:

Let’s break this down:

  • Find the User:
    The code gets the user ID from the URL and looks for the user in the users array.

    If the user is not found, it returns a 404 error.

  • Read the Update Data:
    The code reads the JSON body of the request, which contains the fields to update.

  • Merge the Update:
    The code uses the spread operator (...) to merge the existing user data with the new fields. This means only the fields you send in the PATCH request will be updated.

  • Return the Updated User:
    Finally, the updated user is returned as a JSON response.

Example Output:
If you PATCH /api/users/1 with , the response will be:

How PATCH is Triggered from the UI

It's useful to understand how the frontend sends a PATCHrequest. In the included page.tsx, the handlePatch function lets users enter raw JSON update data and apply it to a specific user by ID.

Here’s what it looks like:

💡 This function:

  • Checks for a user ID
  • Tries to parse the update JSON from user input
  • Sends a PATCH request to /api/users/{id}
  • Displays the response in the logs

This is a useful way to test how the backend reacts to partial data or unexpected input fields.


Handling Errors: User Not Found

It’s important to handle cases where the user does not exist. In the PATCH handler, if the user ID is not found in the users array, the code returns a 404 error with a helpful message:

This makes sure your API responds clearly when someone tries to update a user who isn’t there.

Example Output:
If you PATCH /api/users/999 (and user 999 does not exist), you get:

Summary And What’s Next

In this lesson, you learned how to use the PATCH method to make partial updates to user data in a Next.js API route. You saw how PATCH lets you update only the fields you want and how to handle cases where the user does not exist.

Congratulations on reaching the end of the course! You now know how to create, fetch all and individual users, fully update them with PUT, partially update them with PATCH, and delete them using DELETE — all through clean, structured Next.js API routes. Take a moment to celebrate your progress, and be sure to try the practice exercises to reinforce your new skills. Well done!🎉

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