redis-edge.tsx

import { ImageResponse } from "@vercel/og";
import { RedisEdge } from "redis-edge";

const REDIS_COUNT_KEY = "og-count-2";

export const config = {
  runtime: "experimental-edge",
};

export default async function () {
  const redis = new RedisEdge(
    process.env.UPSTASH_REDIS_ENDPOINT as string,
    process.env.UPSTASH_REDIS_PASSWORD as string
  );
  console.log(redis);
  await redis.set("yo", "boba");
  const currentCount = await redis.get(REDIS_COUNT_KEY);
  const status = await redis.incr(REDIS_COUNT_KEY);
  console.log(currentCount, status);

//   await fetch("https://global-promoted-ape-30182.upstash.io/incr/bar", {
//     headers: {
//       Authorization:
//         "Bearer AXXmACQgYWY1MzI2NjUtMjJmYi00NDAxLTkxOTItNTJkYTAwMWEzNDViNWI2YzFmZDljY2M4NDdiYzg1NjZhZTlhMDNjYWM2ZWI=",
//     },
//   })
//     .then((response) => response.json())
//     .then((data) => console.log(data));

  return new ImageResponse(
    (
      <div
        style={{
          display: "flex",
          fontSize: 60,
          color: "black",
          background: "#f6f6f6",
          width: "100%",
          height: "100%",
          paddingTop: 50,
          flexDirection: "column",
          justifyContent: "center",
          alignContent: "center",
          alignItems: "center",
        }}
      >
        <img
          width="256"
          height="256"
          src={`https://github.com/vercel.png`}
          style={{
            borderRadius: 128,
          }}
        />
        <p>Seen {currentCount || 0} times.</p>
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
}