Having trouble getting a clear answer on something really simple.
I've created an API route:
// /api/test/route.js
export async function GET(request, response) {
console.log("requested");
return NextResponse.json({ my: "data" });
}
On the other hand, I have a component that sends a request to the endpoint when a button is clicked (I included headers for troubleshooting purposes):
// /components/client/test.js
"use client";
export default function ExampleClientComponent({children}) {
async function handleClick() {
let data = await fetch("http://localhost:3000/api/test", {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
});
console.log("data", data);
}
return (
<>
<button onClick={handleClick}>Go</button>
</>
);
}
Upon clicking the button, the console confirms the request was sent and I receive a 200 response in the browser. The body is a ReadableStream, which seems to be the default response for HTTP Responses. However, I expected NextResponse to return the response as JSON.
Response
body: ReadableStream {locked: false}
bodyUsed: false
headers: Headers {append: function, delete: function, get: function, has: function, set: function, …}
ok: true
redirected: false
status: 200
statusText: "OK"
type: "basic"
url: "http://localhost:3000/api/test"
Testing the endpoint directly gives me a JSON body
HTTP/1.1 200 OK
connection: close
content-encoding: gzip
content-type: application/json
date: Tue, 25 Jul 2023 23:15:42 GMT
transfer-encoding: chunked
vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Accept-Encoding
{
"my": "data"
}
What could possibly be causing this? The tutorials and documentation I've reviewed (mostly regarding POST requests) indicate this should work. All I expect is to receive a response with a JSON body.