add routehandler and api route

Author: sommeeeer

examples/app-router/app/streaming/route.ts

@@ -0,0 +1,42 @@
+// https://developer.mozilla.org/docs/Web/API/ReadableStream#convert_async_iterator_to_stream
+function iteratorToStream(iterator: any) {
+  return new ReadableStream({
+    async pull(controller) {
+      const { value, done } = await iterator.next();
+
+      if (done) {
+        controller.close();
+      } else {
+        controller.enqueue(value);
+      }
+    },
+  });
+}
+
+function sleep(time: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time);
+  });
+}
+
+const encoder = new TextEncoder();
+
+async function* makeIterator() {
+  for (let i = 1; i <= 10; i++) {
+    yield encoder.encode(`<p data-testid="iteratorCount">${i}</p>`);
+    await sleep(1000);
+  }
+}
+
+export async function GET() {
+  const iterator = makeIterator();
+  const stream = iteratorToStream(iterator);
+
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/html; charset=utf-8",
+      Connection: "keep-alive",
+      "Cache-Control": "no-cache, no-transform",
+    },
+  });
+}

examples/pages-router/src/pages/api/streaming/index.ts

@@ -0,0 +1,51 @@
+import { Readable } from "node:stream";
+import type { NextApiRequest, NextApiResponse } from "next";
+
+function iteratorToStream(iterator: AsyncIterator<Uint8Array>) {
+  return new ReadableStream({
+    async pull(controller) {
+      const { value, done } = await iterator.next();
+
+      if (done) {
+        controller.close();
+      } else {
+        controller.enqueue(value);
+      }
+    },
+  });
+}
+
+function sleep(time: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, time);
+  });
+}
+
+const encoder = new TextEncoder();
+
+async function* makeIterator() {
+  for (let i = 1; i <= 10; i++) {
+    yield encoder.encode(`<p data-testid="iteratorCount">${i}</p>`);
+    await sleep(1000);
+  }
+}
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  if (req.method !== "GET") {
+    return res.status(405).json({ message: "Method not allowed" });
+  }
+
+  res.setHeader("Content-Type", "text/html; charset=utf-8");
+  res.setHeader("Connection", "keep-alive");
+  res.setHeader("Cache-Control", "no-cache, no-transform");
+
+  // create and pipe the stream
+  const iterator = makeIterator();
+  const stream = iteratorToStream(iterator);
+
+  // @ts-ignore - not sure how to make typescript happy here
+  return Readable.fromWeb(stream).pipe(res);
+}