How to forward Server sent events in NextJS api - reactjs

Question

I have a Next.js api like this (/api/events/index.js):
import EventSource from 'eventsource';
import { getAccessToken, withApiAuthRequired } from '#auth0/nextjs-auth0';
export default withApiAuthRequired(async function handler(req, res) {
if (req.method === 'GET') {
const { accessToken } = await getAccessToken(req, res);
res.writeHead(200, {
Connection: 'keep-alive',
'Cache-Control': 'no-cache',
'Content-Type': 'text/event-stream',
});
const eventSource = new EventSource(
`http://localhost:8000/v1/event-stream`,
{ headers: { Authorization: `Bearer ${accessToken}` } },
);
eventSource.onmessage = (e) => {
res.write(`data: ${e.data}\n\n`);
// res.end();
};
}
});
Essentially, I'm trying to make a request on a backend API SSE endpoint that requires an authorization bearer token (preferably, the access token should be available only on Next.js API side). After an event is received, it should be written in response to of a new event stream.
In React client code, I simply subscribe to these SSE's like this:
const IndexPage = () => {
useEffect(() => {
const eventSource = new EventSource(`http://localhost:3000/api/events`);
eventSource.onmessage = (e) => {
console.log(e);
};
return () => {
eventSource.close();
};
}, []);
return <div></div>;
}
Where's the problem? Nothing is received on the client side.
When I try to call res.end() on the API side, an event is received on the client side, but the event stream keeps reconnecting... like, every second. Basically, the connection is not kept alive. How can I forward the result of my SSE?