Next.js 13.4 App Router API Route Issue: User Registration Component Failing with Undefined Request Body and res.status TypeError

I’m working on a Next.js 13.4 project and encountering issues with my API route. Despite sending data through a form, the API route receives undefined values for the request body, and I also encounter a TypeError related to the res.status function. Here’s the relevant part of my API route:

import { NextApiRequest, NextApiResponse } from 'next'
import argon2 from 'argon2'
import { RowDataPacket, ResultSetHeader } from 'mysql2'
import database from '../database'

export async function POST(req: NextApiRequest, res: NextApiResponse) {
  console.log('API Request received:', req.method, req.url)
  console.log('Solicitud recibida con datos:', req.body)
  const { firstName, lastName, email, password } = req.body

  console.log('Received data:', { firstName, lastName, email })

  if (typeof password !== 'string' || password.trim() === '') {
    console.log('Password validation failed')
    return res
      .status(400)
      .json({ message: 'Password is required and must be a string.' })
  }

  try {
    console.log('Querying for existing users with email:', email)
    const [existingUsers] = await database.query<RowDataPacket[]>(
      'SELECT id FROM Users WHERE email = ?',
      [email],
    )

    console.log('Query result:', existingUsers)
    if (existingUsers.length > 0) {
      console.log('Email already in use')
      return res.status(409).json({ message: 'Email already in use.' })
    }

    console.log('Hashing password')
    const hashedPassword = await argon2.hash(password)

    console.log('Inserting new user into database')
    const [result] = await database.query<ResultSetHeader>(
      'INSERT INTO Users (first_name, last_name, email, hashed_password) VALUES (?, ?, ?, ?)',
      [firstName, lastName, email, hashedPassword],
    )

    console.log('Insert query result:', result)
    if (result.affectedRows === 0) {
      console.log('User could not be created')
      return res.status(400).send('User could not be created.')
    }

    console.log('User created successfully:', result.insertId)
    return res
      .status(201)
      .json({ message: 'User created.', userId: result.insertId })
  } catch (error) {
    console.error('Error occurred:', error)
    return res.status(500).send('Internal Server Error')
  }
}

When I send a POST request, the console logs indicate that firstName, lastName, and email are all undefined, and I encounter a TypeError as follows:

TypeError: res.status is not a function
    at POST <route details>

I’ve verified that the frontend sends the correct data. The issue seems to be with the Next.js 13.4 App Router handling the API request.

Has anyone encountered similar issues with Next.js 13.4, specifically with the App Router and API routes? Any insights or solutions would be greatly appreciated.