How can I make my Next.js API route to work?

Question

I'm trying to write an API route using Vercel's documentation for days now and I just can't fix the errors. The documentation doesn't provide good enough examples. I'm using Next.js' app router which doesn't help at all, because the documentation provides even less support for that.

/app/events/page.js:

'use client'

import Flow from "./Flowchart";
import {subtitle, title} from "../../components/primitives"
import {Button} from "@nextui-org/react";
import React, {useEffect, useState} from "react";

export default function EventPage() {

    const [eventName, setEventName] = useState('')
    const [event, setEvent] = useState()

    useEffect(() => {
        fetch('/api/events', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ eventId: 1 })
        })
            .then(response => response.json())
            .then(event => {
                setEvent(event);
            })
            .catch(error => console.error('Error fetching graph data:', error));
    }, []);

    return (
        <div className="flex flex-col space-y-4 items-center custom-div"  >
            <h1 className={`${title()} `}>Workflow</h1><br></br>
            <h2 className={subtitle({class: "mt-4"})}>
                {/* eslint-disable-next-line react/no-unescaped-entities */}
                Upcoming events
            </h2>
            <div className="w-1/5">

                <Button
                    radius="lg"
                    color="success"
                    variant="ghost"
                    size="lg"
                    fullWidth
                    className="mb-4"
                    onPress={() => router.push('/login')}
                >
                    {event && event.name ? event.name : 'o0o'}
                </Button>
            </div>
            <Flow/>
        </div>
    );
}

/app/api/events/route.js:

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function POST(req, res) {
    if (req.method !== 'POST') {
        return new Response('Method Not Allowed', {
            status: 405,
        });
    }

    const { eventId } = req.body;
    console.log(eventId)
    try {
        const event = await prisma.event.findUnique({
            where: {
                id: parseInt(eventId)
            },
            include: {
                nodes: true,
                edges: true
            }
        });

        // Return the retrieved data
        return res.json(event)
    } catch (error) {
        console.error('Error fetching graph data:', error);
        return new Response('Internal Server Error', {
            status: 500,
        });
    } finally {
        // Disconnect PrismaClient
        await prisma.$disconnect();
    }
}

Can you please help how to use the API routes with Next.js' app router?

With my current code is get the following error:

Error fetching graph data: PrismaClientValidationError:
Invalid `prisma.event.findUnique()` invocation:

{
  where: {
    id: NaN
  },
  include: {
    nodes: true,
    edges: true
  }
}

Argument `in`: Invalid value provided. Expected ListIntFieldRefInput, provided (Null, Null, Null, Null).
    at Cn (C:\Stuff\clubinterflow\node_modules\@prisma\client\runtime\library.js:116:5888)
    at _n.handleRequestError (C:\Stuff\clubinterflow\node_modules\@prisma\client\runtime\library.js:123:6510)
    at _n.handleAndLogRequestError (C:\Stuff\clubinterflow\node_modules\@prisma\client\runtime\library.js:123:6188)
    at _n.request (C:\Stuff\clubinterflow\node_modules\@prisma\client\runtime\library.js:123:5896)
    at async l (C:\Stuff\clubinterflow\node_modules\@prisma\client\runtime\library.js:128:10871)
    at async POST (webpack-internal:///(rsc)/./app/api/events/route.js:18:23)
    at async C:\Stuff\clubinterflow\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:62591 {
  clientVersion: '5.10.2'
}

And eventId is undefined.

Answer 1

as you are using app router, you have to get the body from req.json() instead of req.body. the req.body is only available in apis defined in pages/api folder.

Try,

 const { eventId } = await req.json();

You can read about this in the documentation here

Also, You cannot directly send res.json() in a route.js defined in app router, instead use NextResponse.json()