Skip to content
Log InContact
Sign Up
← Back to Templates
Avatar of vercelvercel/examples

Open Graph Image Generation

Compute and generate dynamic social card images with React components.

Deploy
View Demo
Framework
Next.js
Use Case
Edge Functions
CSS
Tailwind
Open Graph Image Generation

Vercel OG + Next.js

This example shows how to use Vercel OG with Next.js.

Demo

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy

Deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with pnpm to bootstrap the example:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-functions/vercel-og-nextjs

Next, run Next.js in development mode:

pnpm dev

Deploy it to the cloud with Vercel (Documentation).

← Back to Templates
Open Graph Image Generation
Avatar of vercelvercel/examples

Open Graph Image Generation

Compute and generate dynamic social card images with React components.

Deploy
View Demo
Framework
Next.js
Use Case
Edge Functions
CSS
Tailwind

Vercel OG + Next.js

This example shows how to use Vercel OG with Next.js.

Demo

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy

Deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with pnpm to bootstrap the example:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-functions/vercel-og-nextjs

Next, run Next.js in development mode:

pnpm dev

Deploy it to the cloud with Vercel (Documentation).

Related Templates

OG.cool – Display headlines in OG images

OG.cool – Display headlines in OG images

A Next.js app that displays headlines directly inside a dynamically generated image. Powered by @vercel/og.

by Steven Tey

Cron OG Cards

Cron OG Cards

A template for scheduled updates to your OG social cards using Vercel Cron Jobs and Upstash Redis.

by Garrett Tolbert

Next.js Boilerplate

Next.js Boilerplate

Get started with Next.js and React in seconds.

by ▲ Vercel

Platforms Starter Kit

Platforms Starter Kit

Next.js template for building multi-tenant applications with custom domains using App Router, Vercel Postgres, and the Vercel Domains API.

by ▲ Vercel

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential