⨯ TypeError: NextResponse.json is not a function
Unanswered
Giant panda posted this in #help-forum

Giant pandaOP
In my
I'm Getting Error of ⨯ TypeError: NextResponse.json is not a function
app/api/blogs/[id]/route.ts
import { NextResponse, NextRequest } from "next/server"
export const GET = async (NextRequest: any, NextResponse: any) => {
console.log("Dynamic GET")
return NextResponse.json({ message: "Dynamic Route" }, { status: 200 })
}
I'm Getting Error of ⨯ TypeError: NextResponse.json is not a function
4 Replies

Toyger
huge problem here is that you have
here is better example from docs
https://nextjs.org/docs/pages/building-your-application/routing/api-routes
so will be somethgin like that
NextResponse, NextRequest
as imported entities, and then in function you declare them as function params, so it can be confusion in what it using.here is better example from docs
https://nextjs.org/docs/pages/building-your-application/routing/api-routes
so will be somethgin like that
export const GET = async (req: NextApiRequest,
res: NextApiResponse) => {
console.log("Dynamic GET")
return res.json({ message: "Dynamic Route" }, { status: 200 })
}

@Giant panda In my `app/api/blogs/[id]/route.ts`
`
import { NextResponse, NextRequest } from "next/server"
export const GET = async (NextRequest: any, NextResponse: any) => {
console.log("Dynamic GET")
return NextResponse.json({ message: "Dynamic Route" }, { status: 200 })
}
`
I'm Getting Error of ⨯ TypeError: NextResponse.json is not a function

Plott Hound
export async function GET(request) {
console.log("Dynamic GET");
return new Response(JSON.stringify({ message: "Dynamic Route" }), {
status: 200,
headers: {
'Content-Type': 'application/json'
},
});
}

@Toyger huge problem here is that you have `NextResponse, NextRequest` as imported entities, and then in function you declare them as function params, so it can be confusion in what it using.
here is better example from docs
https://nextjs.org/docs/pages/building-your-application/routing/api-routes
so will be somethgin like that
js
export const GET = async (req: NextApiRequest,
res: NextApiResponse) => {
console.log("Dynamic GET")
return res.json({ message: "Dynamic Route" }, { status: 200 })
}

Plott Hound
this is for pages router, they are using app router
if you need NextResponse for some reason even though your code wouldnt need it you could do
import { NextResponse, NextRequest } from "next/server";
export const GET = async (req: NextRequest) => {
console.log("Dynamic GET");
return NextResponse.json({ message: "Dynamic Route" });
};