Next.js Dynamic OpenGraph Image Generation (@vercel/og)

Dynamic OG Image Route

// app/tutorials/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og';

export const runtime = 'edge';
export const alt = 'E-Tutorial Free Courses';
export const size = { width: 1200, height: 630 };

export default async function Image({ params }: { params: { slug: string } }) {
    return new ImageResponse(
        (
            <div style={{ background: '#020617', width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 60 }}>
                E-Tutorial: {params.slug}
            </div>
        )
    );
}