Dynamic social card with Vercel OG Image Generation
Tags: vercel, social, nextjs
Published: 2023-01-06 09:09:59

---
title: 'Dynamic social card with Vercel OG Image Generation'
published: true
description: 'Create dynamic social image with @og/vercel with a free template in the blog post.'
tags: ['vercel', 'social', 'nextjs']
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnyz23m0092cf9gdgq6z.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-06 09:05 +0000
---

*This blog was originally posted on my personal website 👉 [phung.io](https://phung.io/blog/create-dynamic-social-card-with-vercel-og-image-generation?ref=dev.to)*

# Introduction

In this quick tutorial, I will show you how to create an image like [this one](https://phung.io/api/og?title=Dynamic%20social%20card%20with%20Vercel%20OG%20Image%20Generation&published=Jan%206%2C%202023%20%7C%204%20min%20read) below using the Vercel Image Generation API for your social media posts

![social-image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnyz23m0092cf9gdgq6z.jpg)

Inspiration from [fullstackheroes.com](https://fullstackheroes.com/resources/vercel-og-templates/?ref=phung.io)

# Vercel Image Generation API

To get started we need to install the `@og/vercel` package from npm

```bash
npm install @og/vercel
```

Next, create a new file called og-image.ts in the root of your project. This file will be used to generate the image.

```javascript
import { ImageResponse } from '@vercel/og'

export const config = {
  runtime: 'edge',
}

export default function handler(req) {
  try {
    const { searchParams } = new URL(req.url)
    const website = 'phung.io'

    // dynamic params
    const title = searchParams.get('title')?.slice(0, 100)
    const published = searchParams.get('published')

    return new ImageResponse(
      (
        <div tw="h-full w-full flex bg-white border-blue-500 border-[16px]">
          <div tw="flex flex-col justify-between w-full h-full p-20">
            <div tw="flex flex-col">
              <div tw="text-[32px]">{published}</div>
              <h1 tw="text-[64px]">{title}</h1>
            </div>
            <div tw="flex flex-row">
              <img
                src="https://phung.io/static/images/logo.jpeg"
                tw="w-20 h-20 rounded-full"
                alt="tuan-phung"
              />
              <div tw="flex flex-col pl-8">
                <div tw="text-[32px]">Tuan Phung</div>
                <div tw="text-[24px] text-blue-700">{website}</div>
              </div>
            </div>
          </div>
        </div>
      ),
      {
        width: 1200,
        height: 630,
      }
    )
  } catch (e) {
    console.log(`${e.message}`)
    return new Response(`Failed to generate the image`, {
      status: 500,
    })
  }
}
```

and then we can call our API with the following URL

```javascript

const siteUrl = 'https://phung.io'

const encodedTitle = encodeURIComponent(title)
const encodedDate = encodeURIComponent(formatDate(publishedAt) + ' | ' + readingTime.text)

const autoOgImage = `${siteMetadata.siteUrl}/api/og?title=${encodedTitle}&published=${encodedDate}`

<meta property="og:image" content={url} key={autoOgImage} />
<meta property="og:url" content={autoOgImage} />
```

### Here are more links related to @og/vercel

- [Introducing OG Image Generation: Fast, dynamic social card images at the Edge](https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images)
- [Docs: OG Image Generation](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)
- [Free templates for @og/vercel](https://fullstackheroes.com/resources/vercel-og-templates/?ref=phung.io)

## Thanks for reading

Let me know in the comments section what you think about this article. If you love it, you know what to do! Share it with your friends and colleagues.

If you want me to cover some topics in the next post, DM me on twitter [@tuanphung\_](https://twitter.com/tuanphung_), or if you have any suggestions, feel free to comment below.

See ya next time and keep on hacking ✌