Question 271278 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Use NextResponse, Response, or NextAPIResponse in returning GET and Data in NextJS 13.4 API?

Searching around gives some varied answers around the right way to return a response to an API in NextJS. I suspect some may have to do with the transition from pre-13.4 to 13.4. However, I am going to share my experiments on what worked and what is recommended.

export async function GET(request) { 

  // WILL EXPERIMENT WITH THESE 6 return types in 13.4
  return NextResponse.json({ message: 'Hello - GET' });
  return NextResponse.status(200).json({ message: 'Hello - GET' });
 
  return Response.json({ message: 'Hello - GET' });
  return Response.status(200).json({ message: 'Hello - GET' });
  
  return NextAPIResponse.json({ message: 'Hello - GET' });
  return NextAPIResponse.status(200).json({ message: 'Hello - GET' });
}

I am receiving the response through this testMethod

const testMethod = async () => {
   const response = await fetch("/api/testNextJSAPI", {
      method: "GET",
   });
   if (response.ok) {
      console.log("OKAY");
   } else {
      console.log("ERROR");
   }
};
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    In the experiment and cross referencing with docs -- the best one to use is

    return Response.json({ message: 'Hello - GET' });

    I'll make specific notations below because it is not the only one that actually works. Both Response and NextResponse work. And, note, attaching .status(200) never works in any case.

    export async function GET(request) { 

  // WILL EXPERIMENT WITH THESE 6 return types in 13.4

  // USING NEXTRESPONSE
  // * this works - but isn't generally highlighted in docs https://nextjs.org/docs/app/building-your-application/routing/route-handlers
  return NextResponse.json({ message: 'Hello - GET' });
  // ! WRONG - this does not work
  // return NextResponse.status(200).json({ message: 'Hello - GET' });

  // USING RESPONSE
  // (USE THIS ONE)
  // * this works - and is highlighted in docs https://nextjs.org/docs/app/building-your-application/routing/route-handlers
  return Response.json({ message: 'Hello - GET' });
  // ! WRONG - this does not work
  // return Response.status(200).json({ message: 'Hello - GET' });
  
  // *** USING NEXT API RESPONSE NOW
  // ! WRONG - this does not work
  // return NextAPIResponse.json({ message: 'Hello - GET' });
  // ! WRONG - this does not work
  // return NextAPIResponse.status(200).json({ message: 'Hello - GET' });
}

    It does not surprise me that NextResponse and Response would have similar behavior as NextResponse extends the Web Response API as documented here.

    My understanding is that NextAPIResponse is a specialized extension of node's http.ServerResponse which adds some helper methods that make it easier to send json(), set cookies, and send different response types.

    And big-picture, it seems Pages Routing -> NextAPIResponse and App Routing -> NextResponse. However, I would love a higher-level view of why this switched.


  2. 0

    In order to send the status code, you need to put it in the second parameter

    return Response.json({ message: "Hello - GET" }, { status: 200 });
return NextResponse.json({ message: "Hello - GET" }, { status: 200 });

    The difference between NextResponse and Response is that NextResponse extends the Web Response API with additional convenience methods. So it would be enough to use Web Response API if you don’t have any specific needs

    Ref: https://nextjs.org/docs/app/api-reference/functions/next-response#json

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search