How do I return a file in response using NextResponse?

[vikram-n6]

Summary

Is there any way I can return a file as a response using NextResponse?

Additional information

No response

Example

No response

[icyJoseph]

I think, in this case you want to use Response, NextResponse is just an extension of Response with some API helpers, but , all you gotta do is pass the data you want to respond with.

• https://developer.mozilla.org/en-US/docs/Web/API/Response/Response

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export const POST = async (_req: NextRequest) => {
  const res = await fetch("https://picsum.photos/200/300");

  const blob = await res.blob();

  const headers = new Headers();

  headers.set("Content-Type", "image/*");
  
  // or just use new Response ❗️
  return new NextResponse(blob, { status: 200, statusText: "OK", headers });
};

Something like that, for example sends back the image, which you could append to the DOM by doing vanilla JS (or your preferred framework of choice):

fetch("/foo", { method: "POST" })
  .then((res) => res.blob())
  .then((blob) => URL.createObjectURL(blob))
  .then((blob) => {
    let img = document.createElement("img");
    img.src = blob;
    document.body.appendChild(img);
  });

[agistarakha]

This method works on local, but when I tried to deploy it to Vercel, I got these errors:
`

Type error: Route "src/app/api/img/[id]/route.ts" has an invalid export:

16:06:38.685 | "Promise<"" | NextResponse>" is not a valid GET return type:
16:06:38.685 | Expected "Response | Promise", got "Promise<"" | NextResponse>".
16:06:38.685 | Expected "Promise", got "Promise<"" | NextResponse>".
16:06:38.685 | Expected "Response", got """ | NextResponse".
16:06:38.685 | Expected "Response", got "string".

`

[UnicornLinYI]

nice

[BAHAA-THE-KING]

we need a solution for this

[icyJoseph]

Taken from, #86555 (reply in thread):

import { NextRequest, NextResponse } from "next/server";
import fs from "fs/promises";
import path from "path";

export async function GET(request: NextRequest) {
  // open the file
  const f = await fs.open(
    path.resolve(process.cwd(), "public", "sample.txt"),
    "r"
  );
  const buffer = f.readableWebStream();

  const reader = buffer.getReader();

  const stream = new ReadableStream({
    async pull(controller) {
      const { value, done } = await reader.read();

      if (done) {
        controller.close();
        f.close();
      } else {
        controller.enqueue(value);
      }
    },
  });

  return new Response(stream, {
    headers: {
      "Content-Type": "text/plain",
      "Content-Length": (await f.stat()).size.toString(),
    },
  });
}