Open Graph Image Generation
Compute and generate dynamic social card images with React components.
Vercel OG + Next.js
This example shows how to use Vercel OG with Next.js.
Demo
- Static Text
- Vercel Card
- Dynamic Text from URL Query
- Embed SVG Image
- Dynamic PNG Image Based on URL Queries
- Custom Font
- Emoji
- Languages
- Encrypted Token
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).
Open Graph Image Generation
Compute and generate dynamic social card images with React components.
Vercel OG + Next.js
This example shows how to use Vercel OG with Next.js.
Demo
- Static Text
- Vercel Card
- Dynamic Text from URL Query
- Embed SVG Image
- Dynamic PNG Image Based on URL Queries
- Custom Font
- Emoji
- Languages
- Encrypted Token
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).
