| name | slug | description | framework | useCase | css | deployUrl | demoUrl | relatedTemplates | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Open Graph Image Generation |
og-image-generation |
Compute and generate dynamic social card images with React components. |
Next.js |
Edge Functions |
Tailwind |
|
This example shows how to use Vercel OG with Next.js.
- 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
You can choose from one of the following two methods to use this repository:
Deploy the example using Vercel:
Execute create-next-app with npm or Yarn to bootstrap the example:
npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/vercel-og-nextjs
# or
yarn create next-app --example https://github.com/vercel/examples/tree/main/edge-functions/vercel-og-nextjsNext, run Next.js in development mode:
npm install
npm run dev
# or
yarn
yarn devDeploy it to the cloud with Vercel (Documentation).