🎯 Overview
When links to Gitverse profiles or repositories are shared on Twitter/X, Discord, or LinkedIn, they currently likely rely on a static fallback meta image. We should leverage Next.js's native Image Response API to generate dynamic, personalized social cards on the fly.
💡 Expected Behavior
When someone shares gitverse.app/u/username, the Next.js edge function dynamically generates an image containing:
- The user's GitHub avatar.
- Their total star count and repository count.
- A beautiful gradient background matching the Gitverse theme.
⚙️ Implementation Details
- Create a new API route:
app/api/og/route.tsx.
- Import
ImageResponse from next/og.
- Fetch basic GitHub stats using the username passed via query parameters (e.g.,
?user=nisshchayarathi).
- Design the card layout using standard HTML/Tailwind CSS within the
ImageResponse return block.
- Add the dynamic API endpoint to the
metadata export in app/layout.tsx or app/[username]/page.tsx.
مزایا (Benefits)
- Massive boost to social sharing and SEO.
- Zero extra bundle size for the client, as it's generated at the edge.
- Excellent showcase of Next.js 14+ App Router capabilities.
🎯 Overview
When links to Gitverse profiles or repositories are shared on Twitter/X, Discord, or LinkedIn, they currently likely rely on a static fallback meta image. We should leverage Next.js's native Image Response API to generate dynamic, personalized social cards on the fly.
💡 Expected Behavior
When someone shares
gitverse.app/u/username, the Next.js edge function dynamically generates an image containing:⚙️ Implementation Details
app/api/og/route.tsx.ImageResponsefromnext/og.?user=nisshchayarathi).ImageResponsereturn block.metadataexport inapp/layout.tsxorapp/[username]/page.tsx.مزایا (Benefits)