Return Eventstream response from Azure openai to nextjs

Question

In order to not expose the api key of my Azure openai ,I create a nextjs API that send the request to openai and get the stream and send it back to the Front End ,I created the pages/api/gpt

Here is my code

import { OpenAIError} from '@/utils/server';


const handler = async (req: Request): Promise<Response> => {
  try {
    const data = req.body;

    const query = data["query"];

    const stream = await fetch(
      'https://westeurope.api.cognitive.microsoft.com/openai/deployments/gpt-35/chat/completions?api-version=2023-05-15',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'api-key': 'MY API KEY',
        },
        body: JSON.stringify({
          messages: [
            {
              role: 'system',
              content: query,
            },
          ],
          stream: true,
        }),
      },
    );
      

    return stream;
  } catch (error) {
    console.error(error);
    if (error instanceof OpenAIError) {
      return new Response('Error', { status: 500, statusText: error.message });
    } else {
      return new Response('Error', { status: 500 });
    }
  }
};

export default handler;

And here is my Front-End code :

 body = JSON.stringify({ "query" : query});            
const endpoint ="api/gpt"
const response = await fetch(endpoint, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body,
});

I keep getting is this message :

API resolved without sending a response for /api/gpt, this may result in stalled requests.