How do I return a ReadableStream in an API route?

[vedantroy]

Summary

I want to return a file in an API route. However, I don't know how to do that. Well.... this works:

  const buf = await fs.promises.readFile("example.txt")
  return new NextResponse(ReadableStream.)

but, I want to return the file in a streaming fashion. This means, I need to use something like the ReadableStream API. Not sure how to do this.

Additional information

No response

Example

No response

[icyJoseph]

You mean like this? https://nextjs.org/docs/app/building-your-application/routing/router-handlers#streaming

[vedantroy]

Oh this seems like the thing i'm looking for, I'm surprised there is not a builtin nodejs stream to nextjs readable stream though

[nmitic]

I do not know how the link above helped you? I have a stream which I want to return and later consume on the client, link doesn't explain how to do that, instead it uses a bunch of helper func from openai react package.

[lukeocodes]

I think there needs to be a better way to do this, especially if you don't intend on streaming text back.

[OliverDudgeon]

Is there any way to do this with API routes in the pages router? It wants a NodeJS.WritableStream but I just have a ReadableStream transformed from a fetch(...) call?

[stalingino]

export async function GET(req) {
	const filePath = path.join(process.cwd(), 'public', req.nextUrl.searchParams.get('fileName') + '.html');
	const res = new NextResponse(fs.createReadStream(filePath, { encoding: 'utf8' }));
	res.headers.set('Content-Type', 'text/html');
	return res;
}

This is working very well.

[sommeeeer]

I've been looking into hosting my long lived API elsewhere to get around this. Unfortunate, but I feel like I'm missing some config somewhere.

To be honest, if your just streaming responses, I dont think most modern web browsers would care about that header. It should just work anyways. Else those deployment platforms would not strip it out, I beieve.

[TechQuery]

@sommeeeer @sahibjotsaggu keep-alive may be not necessary?
https://www.ericburel.tech/blog/nextjs-stream-files#how-to-stream-big-files-the-old-way-with-api-routes-nextjs-9

[sahibjotsaggu]

@TechQuery yes, after looking into this more, I realized I didn't need many of the headers to do the streaming. In fact, I don't have any special headers for my AI streaming.

[sommeeeer]

@TechQuery yeah as i said, its not really mandatory. you can most likely skip it. what is is important tho is that you close the stream, which is done automatically by Next if you return it, or you would have to call res.end() your self

[TechQuery]

what is is important tho is that you close the stream, which is done automatically by Next if you return it, or you would have to call res.end() your self

@sommeeeer return or res.end() may be not necessary too?
https://nextjs.org/docs/pages/building-your-application/routing/api-routes