How do you implement a streaming response from a Route Handler in Next.js?

Question

Accepted Answer

Streaming is useful when you have long-running operations like AI text generation, large data exports, or real-time logs. Instead of the client waiting for the full response, it starts receiving and rendering data immediately as chunks arrive. AI/LLM responses — stream tokens as they are generated (e.g. ChatGPT-style) Large data exports — stream CSV/JSON rows without loading all data into memory Real-time logs — stream server logs or job progress to the client Long-running computations — send partial results as they become available Server-Sent Events (SSE) — push updates from server to client over HTTP // app/api/stream/route.js export async function GET() { const stream = new ReadableStream({ async start(controller) { const chunks = ['Hello', ' ', 'from', ' ', 'streaming', '!'] for (const chunk of chunks) { // Encode string to Uint8Array and enqueue controller.enqueue(new TextEncoder().encode(chunk)) // Simulate delay between chunks await new Promise(res => setTimeout(res, 500)) } controller.close() // signal end of stream } }) return new Response(stream, { headers: { 'Content-Type': 'text/plain; charset=utf-8', 'Transfer-Encoding': 'chunked' } }) } // app/api/chat/route.js import OpenAI from 'openai' const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY }) export async function POST(request) { const { prompt } = await request.json() const stream = new ReadableStream({ async start(controller) { const encoder = new TextEncoder() const completion = await openai.chat.completions.create({ model: 'gpt-4', stream: true, // enable streaming from OpenAI messages: [{ role: 'user', content: prompt }] }) for await (const chunk of completion) { const text = chunk.choices[0]?.delta?.content || '' if (text) { controller.enqueue(encoder.encode(text)) } } controller.close() } }) return new Response(stream, { headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' } }) } // app/api/events/route.js export async function GET() { const encoder = new TextEncoder() const stream = new ReadableStream({ async start(controller) { let count = 0 const interval = setInterval(() => { count++ // SSE format: 'data: ' const message = `data: ${JSON.stringify({ count, time: new Date().toISOString() })} ` controller.enqueue(encoder.encode(message)) if (count >= 10) { clearInterval(interval) controller.close() } }, 1000) } }) return new Response(stream, { headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive', 'Access-Control-Allow-Origin': '*' } }) } // app/chat/page.jsx 'use client' import { useState } from 'react' export default function ChatPage() { const [response, setResponse] = useState('') const [loading, setLoading] = useState(false) const handleStream = async () => { setLoading(true) setResponse('') const res = await fetch('/api/chat', { method: 'POST', body: JSON.stringify({ prompt: 'Explain Next.js streaming' }), headers: { 'Content-Type': 'application/json' } }) const reader = res.body.getReader() const decoder = new TextDecoder() while (true) { const { done, value } = await reader.read() if (done) break // Decode chunk and append to response const chunk = decoder.decode(value, { stream: true }) setResponse(prev => prev + chunk) // ✅ progressively update UI } setLoading(false) } return (

{response}

) } // app/events/page.jsx 'use client' import { useEffect, useState } from 'react' export default function EventsPage() { const [events, setEvents] = useState([]) useEffect(() => { // EventSource natively handles SSE const es = new EventSource('/api/events') es.onmessage = (event) => { const data = JSON.parse(event.data) setEvents(prev => [...prev, data]) } es.onerror = () => es.close() return () => es.close() // cleanup on unmount ✅ }, []) return (

Count: {e.count} — {e.time}

) } Always set 'Cache-Control: no-cache' for streaming responses to prevent buffering Use 'Transfer-Encoding: chunked' for plain streams and 'text/event-stream' for SSE Always call controller.close() when done — leaving streams open causes memory leaks Edge Runtime supports streaming natively and has lower latency than Node.js runtime Node

How do you implement a streaming response from a Route Handler in Next.js?

In Next.js App Router, Route Handlers can stream responses using the Web Streams API via ReadableStream or TransformStream. This allows data to be sent to the client progressively — chunk by chunk — instead of waiting for the entire response to be ready.

How do you implement a streaming response from a Route Handler in Next.js?

In Next.js App Router, Route Handlers can stream responses using the Web Streams API via ReadableStream or TransformStream. This allows data to be sent to the client progressively — chunk by chunk — instead of waiting for the entire response to be ready.

Scenario Questions

Follow-up Questions