I'm trying to secure certain images behind an API but don't know how to properly return a file buffer using the new NextResponse object. Here's what I've tried so far:

export async function GET(
  _: NextRequest,
  { params: { filePath } }: { params: DynamicRouteParams },
) {
  // const session = await auth();
  // if (!session) return NextResponse.json(null, { status: 401 });

  const resolvedPath = path.resolve(`private/${filePath.join("/")}`);
  if (!existsSync(resolvedPath)) return NextResponse.json(null, { status: 404 });

  const file = await readFile(resolvedPath);
  const headers = new Headers();

  headers.set("Cache-Control", "private, max-age=43200"); // Cache content for 12 hours

  headers.set("Content-Length", file.byteLength.toString());

  const mimeType = mime.getType(path.extname(resolvedPath));
  if (mimeType) headers.set("Content-Type", mimeType);

  return NextResponse.json(file, { status: 200, headers });
}

When I call the API, the image is just the generic missing file icon, even though the buffer seems to be entirely there and the status is 200: