Vercel Streaming Quickstart

In this quickstart, you'll learn how to get started with streaming on Vercel. The guide will cover:

• Creating a Vercel Function
• Using the Web Streams API to stream an API response
• Running your function locally

1. You should have the latest version of Vercel CLI installed. To check your version, use vercel --version. To install or update Vercel CLI, use:

   pnpm

   yarn

   npm

   pnpm i -g vercel@latest

2. You should be using Node.js 18 or later.

3. You should have an existing project. If you don't have one, you can run the following terminal commands to create a Next project:

   pnpm

   yarn

   npm

   pnpm i next

npx create-next-app@latest

Vercel supports streaming responses from Vercel Functions, which you typically create within your framework code, such as with a Next.js Route Handler. Both the nodejs runtime and the edge runtime supports streaming by default. This guide will show you how to create a streaming Function using the Node.js runtime.

1. Create a Function

   1. To get started, first create app/api/streaming-example/route.ts
   2. Then, add the following code, which sets up a basic Function with a route handler method:
   Next.js (/app)

   Next.js (/pages)

   Other frameworks

   app/api/streaming-example/route.ts

   TypeScript

   TypeScriptJavaScript

   export const runtime = 'nodejs';
   export const dynamic = 'force-dynamic'; // always run dynamically
    
   export async function GET() {
     // Streaming code will go here
   }

2. Create a ReadableStream

   This example will demonstrate a basic example of streaming on response from your function. Add the following code to your function:

   Next.js (/app)

   Next.js (/pages)

   Other frameworks

   app/api/streaming-example/route.ts

   TypeScript

   TypeScriptJavaScript

   export async function GET() {
     const customReadable = new ReadableStream({
       start(controller) {...},
     });
   }

3. Add content to your stream

   Use a TextEncoder to emit a stream of text as UTF-8 bytes:

   Next.js (/app)

   Next.js (/pages)

   Other frameworks

   app/api/streaming-example/route.ts

   TypeScript

   TypeScriptJavaScript

   export async function GET() {
     const encoder = new TextEncoder();
     const customReadable = new ReadableStream({
       start(controller) {
         controller.enqueue(encoder.encode('Basic Streaming Test'));
         // Prevent anything else being added to the stream
         controller.close();
       },
     });
   }

4. Return the stream as your API response

   Next, start producing a streaming response from your function:

   Next.js (/app)

   Next.js (/pages)

   Other frameworks

   app/api/streaming-example/route.ts

   TypeScript

   TypeScriptJavaScript

   export async function GET() {
     ...
    
     return new Response(customReadable, {
       headers: { 'Content-Type': 'text/html; charset=utf-8' },
     });
   }

   Finally, the whole file should look like this:

   Next.js (/app)

   Next.js (/pages)

   Other frameworks

   app/api/streaming-example/route.ts

   TypeScript

   TypeScriptJavaScript

   export const runtime = 'nodejs';
   export const dynamic = 'force-dynamic'; // always run dynamically
    
   export async function GET() {
     // This encoder will stream your text
     const encoder = new TextEncoder();
     const customReadable = new ReadableStream({
       start(controller) {
         // Start encoding 'Basic Streaming Test',
         // and add the resulting stream to the queue
         controller.enqueue(encoder.encode('Basic Streaming Test'));
         // Prevent anything else being added to the stream
         controller.close();
       },
     });
    
     return new Response(customReadable, {
       headers: { 'Content-Type': 'text/html; charset=utf-8' },
     });
   }

5. Test your code locally

   Use next dev to start a local development server:

   terminal

   next dev

   Navigate to http://localhost:3000/api/streaming-example to see the streamed response from your route.

   The page should display the message "Basic Streaming Text".