Next.js Discord

Discord Forum

Making an API that creates and deletes a user as test but response.json is not a function

Answered
JCo posted this in #help-forum
Open in Discord
JCoOP
I am building an API that handles the database calls for my next app and a discord bot that is connected to it, however on the testing the DB api call, i am getting the following error when testing it.

 TypeError: res.json is not a function
    at GET (webpack-internal:///(rsc)/./src/app/api/test/db/route.ts:9:9)
    at async E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:63809
    at async eU.execute (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:53964)
    at async eU.handle (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:65062)
    at async doRender (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1317:42)
    at async cacheEntry.responseCache.get.routeKind (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1539:28)
    at async DevServer.renderToResponseWithComponentsImpl (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1447:28)
    at async DevServer.renderPageComponent (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1844:24)
    at async DevServer.renderToResponseImpl (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1882:32)
    at async DevServer.pipeImpl (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:895:25)
    at async NextNodeServer.handleCatchallRenderRequest (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\next-server.js:269:17)
    at async DevServer.handleRequestImpl (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:791:17)
    at async E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:331:20
    at async Span.traceAsyncFn (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\trace\trace.js:151:20)
    at async DevServer.handleRequest (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:328:24)
    at async invokeRender (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:174:21)
    at async handleRequest (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:353:24)
    at async requestHandlerImpl (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:377:13)
    at async Server.requestListener (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\start-server.js:140:13)


with this code
import { test } from "@/lib/db";
import type { NextApiRequest, NextApiResponse } from "next";

export async function GET(req: NextApiRequest, res: NextApiResponse) {
    const response = await test();

    res.json({
        message: "Created and deleted a test user",
        user: {
            ...response,
        },
    });
}


Can anyone please help tell me what I have done wrong here?
Answered by Ray
NextApiRequest and NextApiResponse is for pages router
in app router, the route handler should look like this
import { test } from "@/lib/db";
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
    const response = await test();

    return NextResponse.json({
        message: "Created and deleted a test user",
        user: {
            ...response,
        },
    });
}
View full answer

1 Reply

@JCo I am building an API that handles the database calls for my next app and a discord bot that is connected to it, however on the testing the DB api call, i am getting the following error when testing it. bash TypeError: res.json is not a function at GET (webpack-internal:///(rsc)/./src/app/api/test/db/route.ts:9:9) at async E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:63809 at async eU.execute (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:53964) at async eU.handle (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:65062) at async doRender (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1317:42) at async cacheEntry.responseCache.get.routeKind (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1539:28) at async DevServer.renderToResponseWithComponentsImpl (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1447:28) at async DevServer.renderPageComponent (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1844:24) at async DevServer.renderToResponseImpl (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:1882:32) at async DevServer.pipeImpl (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:895:25) at async NextNodeServer.handleCatchallRenderRequest (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\next-server.js:269:17) at async DevServer.handleRequestImpl (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\base-server.js:791:17) at async E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:331:20 at async Span.traceAsyncFn (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\trace\trace.js:151:20) at async DevServer.handleRequest (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\dev\next-dev-server.js:328:24) at async invokeRender (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:174:21) at async handleRequest (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:353:24) at async requestHandlerImpl (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\router-server.js:377:13) at async Server.requestListener (E:\Code\cleo\node_modules\.pnpm\next@14.1.4_react-dom@18.2.0_react@18.2.0\node_modules\next\dist\server\lib\start-server.js:140:13) with this code typescript import { test } from "@/lib/db"; import type { NextApiRequest, NextApiResponse } from "next"; export async function GET(req: NextApiRequest, res: NextApiResponse) { const response = await test(); res.json({ message: "Created and deleted a test user", user: { ...response, }, }); } Can anyone please help tell me what I have done wrong here?
Ray
NextApiRequest and NextApiResponse is for pages router
in app router, the route handler should look like this
import { test } from "@/lib/db";
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest) {
    const response = await test();

    return NextResponse.json({
        message: "Created and deleted a test user",
        user: {
            ...response,
        },
    });
}
Answer