How to send a JSON response from an API route in Next.js?

Question

I am developing a tiny REST API for a Next.js app. If I place my route.ts in rootDir -> app -> api -> hello -> route.ts that looks like this, then it works:

//route.ts
export async function GET(request: Request) {
  return new Response('Hello, Next.js!')
}

I can make a successful GET request via Postman to localhost:3000/api/hello.

I change the code now to the following:

import { NextApiRequest, NextApiResponse } from "next";

export async function GET(request: NextApiRequest, response: NextApiResponse) {
  return response.json({ message: "Hello, Next.js!" });
}

Now it fails and I get the error message:

error TypeError: response.json is not a function

The issue is known but the upgrade to the latest lts or the latest node version does not fix my problem: https://github.com/vercel/next.js/issues/48524.

Youssouf Oumar · Accepted Answer · 2024-01-15 10:08:57Z

23

While your attempt would work in the pages directory of Next.js, the initial way of setting up routes, with the newer app folder you need to use the NextResponse object from next/server, as you can read on the doc:

import { NextResponse } from "next/server";

export async function GET(request: Request) {
  return NextResponse.json({ messsage: "Hello World" });
}

edited Jan 15, 2024 at 10:08

answered Jul 22, 2023 at 9:53

Youssouf Oumar

47.5k16 gold badges109 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oleg Zinchenko · Accepted Answer · 2024-10-11 00:00:42Z

2

It also will simply work with Response.json()

export function GET(request) {

  return Response.json({ messsage: 'Hello World' })
  // return new Response('Hello')
}

answered Oct 11, 2024 at 0:00

Oleg Zinchenko

62910 silver badges18 bronze badges

1 Comment

Mile Mijatović Over a year ago

Why is this downvoted answer? This works for me

Collectives™ on Stack Overflow

How to send a JSON response from an API route in Next.js?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related