Next.js Discord

Discord Forum

NextJS 14.00 API routing bug

Unanswered
Snowy Plover posted this in #help-forum
Open in Discord
Snowy PloverOP
output:

ReadableStream { locked: false, state: 'readable', supportsBYOB: false }
PrismaClientValidationError:
Invalid prisma.task.create() invocation:

{
data: {
title: undefined,
description: undefined,
date: undefined,
time: undefined,
+ complete: Boolean
}
}

Argument complete is missing.
at En (C:\Users\Asus\my-todo\node_modules@prisma\client\runtime\library.js:116:5888)
at Cn.handleRequestError (C:\Users\Asus\my-todo\node_modules@prisma\client\runtime\library.js:123:6516)
at Cn.handleAndLogRequestError (C:\Users\Asus\my-todo\node_modules@prisma\client\runtime\library.js:123:6206)
at Cn.request (C:\Users\Asus\my-todo\node_modules@prisma\client\runtime\library.js:123:5926)
at async l (C:\Users\Asus\my-todo\node_modules@prisma\client\runtime\library.js:128:9968)
at async POST (webpack-internal:///(rsc)/./app/api/addTask/route.ts:13:24)
at async C:\Users\Asus\my-todo\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:61856 {
clientVersion: '5.5.2'
}
⨯ TypeError: res.status is not a function
at POST (webpack-internal:///(rsc)/./app/api/addTask/route.ts:26:25)
at async C:\Users\Asus\my-todo\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:61856

33 Replies

Snowy PloverOP
server-side code:

import type { NextApiRequest, NextApiResponse } from 'next' import prisma from '../../../lib/prisma' import { NextRequest, NextResponse } from 'next/server' // POST /api/task // Required fields in body: title, description, date, time, complete export async function POST( req: NextApiRequest, res: NextApiResponse, ) { console.log(req.body) const { title, description, date, time, complete } = req.body try { const result = await prisma.task.create({ data: { title: title, description: description, date: date, time: time, complete: complete, }, }) console.log(res) return res.status(200).json(result) } catch (error) { console.error(error) console.log(res.status(500)) return res.status(500).json({ error: 'An error occurred while creating the task' }) } }
client-side code:

async function createTask(task : Task) { console.log('Sending task to server:', task); const response = await fetch('/api/addTask', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(task), }); console.log('Received response from server:', response); if (!response.ok) { throw new Error(response.statusText); } console.log(response.json()) return response.json(); }
I am using Next.js 14 with Prisma ORM
this is my output in browser
I am using Chrome
my OS is Windows
I have tried using NextRequest, NextApiRequest, Request, but all does not work
the expected output should be 200 OK with the results posted in the database
at the very least, i am expecting if it is error to at least have the json readable, but instead what i get in the request body in the server side is just a readable stream
I have checked my parameters and arguments 5 times and there is nothing wrong
Ray
use NextResponse.json(result) instead of res.status().json()
the second arg of route handler is for dynamic param
export async function POST(request: Request) {
  const formData = await request.formData()
  const name = formData.get('name')
  const email = formData.get('email')
  return Response.json({ name, email })
}
@Ray the second arg of route handler is for dynamic param
Snowy PloverOP
what is dynamic params?
Ray
export async function GET(
  request: Request,
  { params }: { params: { slug: string } }
) {
  const slug = params.slug // 'a', 'b', or 'c'
}
something like app/api/[postId]/route.ts
then the params will be {postId: string}
Snowy PloverOP
⨯ Error: No response is returned from route handler 'C:\Users\Asus\my-todo\app\api\addTask\route.ts'. Ensure you return a Response or a NextResponse in all branches of your handler.
at C:\Users\Asus\my-todo\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:62021
Ray
how does the api route look like now?
Snowy PloverOP
export async function POST(
req: NextApiRequest,
res: NextApiResponse,
) {
console.log(req.body)
const { title, description, date, time, complete } = req.body
try {
const result = await prisma.task.create({
data: {
title: title,
description: description,
date: date,
time: time,
complete: complete,
},
})
console.log(res)
return NextResponse.json(result)
}
catch (error) {
console.error(error)
// console.log(res.status(500))
// return res.status(500).json({ error: 'An error occurred while creating the task' })
}
}
Ray
replace return res.status(500).json({ error: 'An error occurred while creating the task' }) with return NextResponse.json({ error: 'An error occurred while creating the task' })
Snowy PloverOP
Ok, the response bug is gone, but the request bug is still there
ReadableStream { locked: false, state: 'readable', supportsBYOB: false }
Ray
const { title, description, date, time, complete } = await req.json()
it is not bug, the route handler of app router build with Web API
https://developer.mozilla.org/en-US/docs/Web/API/Request/json
Snowy PloverOP
async function createTask(task : Task) { console.log('Sending task to server:', task); const response = await fetch('/api/addTask', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(task), }); console.log('Received response from server:', response); if (!response.ok) { throw new Error(response.statusText); } console.log(response.json()) return response.json(); } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); const task = {title, description, date, time, complete: false} try{ await createTask(task); } catch (error){ console.error(error) } }

this is my client-side code, is there anything wrong with this perhaps?
this is my updated server-side code:

export async function POST( req: NextRequest, ) { console.log(req.body) const { title, description, date, time, complete } = await req.json() try { const result = await prisma.task.create({ data: { title: title, description: description, date: date, time: time, complete: complete, }, }) return NextResponse.json(result) } catch (error) { console.error(error) // console.log(res.status(500)) return NextResponse.json({ error: 'An error occurred while creating the task' }) } }

the output is still like this:
ReadableStream { locked: false, state: 'readable', supportsBYOB: false }
Ray
remove console.log(req.body)
Snowy PloverOP
thank you so much, it works fine now
🙏