â¨¯ TypeError: NextResponse.json is not a function

Unanswered

Giant panda posted this in #help-forum

Giant pandaOP

2023-12-17T11:18:42.000Z

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

4 Replies

Toyger

2023-12-17T11:29:36.000Z

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

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

2023-12-17T12:06:43.000Z

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

2023-12-17T12:06:58.000Z

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" });
};