Installation
$ pnpm dlx shadcn@latest add @ogimagecn/product
Usage
import { ImageResponse } from "next/og";
import { Product } from "@/components/og/product";
export function GET() {
return new ImageResponse(
<Product
title="Acme Pro"
description="Everything you need to ship faster."
price="$49"
image="https://example.com/product.png"
brand="ogimagecn"
/>,
{ width: 1200, height: 630 }
);
}API Reference
Product
| Prop | Type |
|---|---|
brand | string |
title | string |
description | string |
price | string |
image | string |
logo | string |