Example:
| Query | Desc | Example |
|---|---|---|
| img | Image product | https://cdn.gramedia.com/uploads/items/9786230029783_Jujutsukaisen_5.jpg |
| writer | Writer product name | Gege Akutami |
| title | Product name | Jujutsu Kaisen 05 |
| isDiscount | If product is discount, put 'true' if not 'false' | true |
| actualPrice | Actual price product | Rp. 40.000 |
| discountedPrice | If product is discount, put the discounted price if not empty | Rp. 30.000 |
| discount | If product is discount, put the discount value if not empty | 25 % |
| publisher | Publisher name | Elex Media Komputindo |
Generate OG Image dynamically based on the product slug passed in the query url.
Using Next JS as base and Vercel/OG to generate HTML, CSS and JS, (you can even use Tailwind) to create or generate images.
This project can also be used as a separate service, which is only for generating OG images.
The benefit is that a preview image of a product can provide more information, for example the price of the product and its discount. Comparison:
Without custom image:
With custom generated image:
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev