Fork of https://github.com/vercel/examples/tree/main/edge-functions/vercel-og-nextjs customized for https://nunosempere.com/. In particular, it parses relative paths and finds the page title and the first image, and displays those in a social card.
| assets | ||
| pages | ||
| public | ||
| .eslintrc.json | ||
| .gitignore | ||
| next-env.d.ts | ||
| next.config.js | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| yarn.lock | ||
| 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 | https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/edge-functions/vercel-og-nextjs&project-name=vercel-og-nextjs&repository-name=vercel-og-nextjs | https://og-examples.vercel.sh/api/static |
|
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 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-nextjs
Next, run Next.js in development mode:
npm install
npm run dev
# or
yarn
yarn dev
Deploy it to the cloud with Vercel (Documentation).