DEV Community

Cover image for Generate Dynamic Open Graph Images using Nextjs
Shrihari Mohan
Shrihari Mohan

Posted on

Generate Dynamic Open Graph Images using Nextjs

Dynamic OG

Dynamic OG helps developers easily create og images without needing to develop their proprietary code.

It is completely free to use and a self-hosted paid version is also available. This tutorial serves as a base for Dynamic OG.

Here are some of the templates available in Dynamic OG. Get started with the Simple theme below.

All these are dynamically generated based on the queries on the url.

Use Dynamic OG for your projects/companies for free.

Simple Theme

Docs Theme

Blogs Theme

Profile Theme

Getting started witht the simple theme

We're going to use nextjs and ImageResponse from next/og to create our simple images.

To create a new nextjs app

npm i create-next-app
Enter fullscreen mode Exit fullscreen mode
npx create-next-app@latest
Enter fullscreen mode Exit fullscreen mode

In this simple-og project we're going to use App Router. You can also find the github repo at the bottom of the blog.

✔ What is your project named? … simple-og
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/shrihari/testRepos/simple-og.
Enter fullscreen mode Exit fullscreen mode
npm install @vercel/og
Enter fullscreen mode Exit fullscreen mode

Inside your app folder create 2 files.

cd simple-og/src/app 
touch Simple.tsx
touch img/route.tsx
Enter fullscreen mode Exit fullscreen mode

In the Simple.tsx file. You have to be picky with the css as the ImageResponse supports only certain types of styles.

type TSimpleTemplate = { title: string , website: string }

export function SimpleTemplate({ t }: { t: TSimpleTemplate }) {
  return (
    <div
      style={{
        background: '#f8fafc',  color: '#334155',
        width: '100%', height: '100%',
        display: 'flex',  alignItems: 'center', 
        justifyContent: 'center', padding: "24px",
      }}>
      <div style={{
        margin: '6px', padding: "24px", width: "100%",
        borderRadius: "24px", height: "100%", fontSize: 72, 
        display: "flex", flexDirection: "column",
        border: `#334155 2px solid`, color: '#334155'
      }}>
        {t.title?.slice(0, 80)}
        <hr style={{ border: `#334155 1px solid`, width: "100%" }}></hr>
        <p style={{ fontSize: "52", fontWeight: "700", display: 'flex',
           justifyContent: 'center', color: '#334155' }}> {t.website}</p>
      </div>
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

In the img/route.tsx file

import { SimpleTemplate } from '../Simple';
import { ImageResponse } from 'next/og'
import { NextRequest } from 'next/server'

// Route segment config
export const runtime = 'edge'

// Image generation
export async function GET(request: NextRequest) {

  const params = request.nextUrl.searchParams

  const title: string = params.get("title") || "No title";
  const website: string = params.get("website") || "No website"

  const t = { title, website }

  return new ImageResponse(
    (
      <SimpleTemplate t={t} />
    ),
    {
      width: 1200,
      height: 630,
      headers: {
        'Cache-Control': 'public, max-age=3600, immutable',
      },
    },
  )
}
Enter fullscreen mode Exit fullscreen mode

On your browser open http://localhost:3000/simple/img?title=Every%20moment%20is%20a%20fresh%20beginning.&website=blogs.gratitude.com

Just change the queries param values to generate a dynamic image based on the queries.

Deploy on your preferred servers. You can use vercel for free if you are using only couple thousands requests per month!

Demo simple image

Source code on github simple-og-image

It is completely free to use all our default templates and a self-hosted paid version is also available. This tutorial serves as a base for Dynamic OG.


Self Hosted Dynamic OG Includes

  • Get lifetime access for just $10 per template. Customize them to match your style. Own your templates for ever.

  • Leave server setup to us. Deploy on your preferred platform: Cloudflare Workers, Netlify Functions, Vercel, or even machines.

  • You own the source code of your templates. This means your designs are yours, not ours. We simply provide the tools.

Learn more about Dynamic OG

Top comments (0)