Handling POST Requests in Next.js API Routes

In this guide, we will explore how to handle POST requests in a Next.js API route. This involves setting up a function to manage the incoming requests, accessing the request body, and interacting with the database to create new tasks.

Setting Up the POST Handler

To handle POST requests, we need to create a function in our route.js file. The function should be named post and it will have access to the request object. We will use await request.json() to get the data from the request body and create a new task in the database.

Example Code

export async function post(request) {
    const data = await request.json();
    const task = await db.task.create({
        data: {
            content: data.content
        }
    });
    return new Response(JSON.stringify({ data: task }), {
        headers: { 'Content-Type': 'application/json' },
        status: 201
    });
}

Testing with Thunder Client

Since browsers cannot make POST requests directly, we use Thunder Client or a similar tool to test our endpoint. We set the URL to /api/tasks and the method to POST. The request body should be in JSON format, with a content field.

Example Request Body

{
    "content": "Task from Thunder Client"
}

Handling Missing Function Error

If you try to make a request to a route that does not have the corresponding function defined, you will receive a 405 error. Ensure that the function is named correctly and is properly set up to handle the request.

Logging the Request

To debug and inspect the incoming request, you can log the request object. This will provide insight into the request details.

Example Code for Logging

export async function post(request) {
    console.log(request);
    const data = await request.json();
    const task = await db.task.create({
        data: {
            content: data.content
        }
    });
    return new Response(JSON.stringify({ data: task }), {
        headers: { 'Content-Type': 'application/json' },
        status: 201
    });
}

Creating a Task

We use the Prisma client to interact with the database. The task creation involves calling the create method on the task model and passing the content from the request body.

Example Code for Task Creation

const task = await db.task.create({
    data: {
        content: data.content
    }
});

Using NextResponse for Custom Responses

Next.js provides a NextResponse object that can be used to create custom responses. This can be useful for adding additional functionality or customizing the response structure.

Example Code for NextResponse

import { NextResponse } from 'next/server';

export async function post(request) {
    const data = await request.json();
    const task = await db.task.create({
        data: {
            content: data.content
        }
    });
    return NextResponse.json({ data: task }, { status: 201 });
}

Conclusion

By following these steps, you can handle POST requests in your Next.js API routes, interact with your database, and return appropriate responses. Up next, we will discuss how to set up middleware in Next.js.