feat(seo): add OpenGraph image templates for all routes

Add OpenGraph image generation for better social media sharing previews across all routes.

Changes:
- Add opengraph-image.tsx files for all main routes:
  - Home page, Articles (list + detail), CLIs (list + detail + comparison)
  - Extensions (list + detail + comparison), IDEs (list + detail + comparison)
  - Models (list + detail + comparison), Providers (list + detail)
  - Vendors (list + detail)
- Create reusable OGImageTemplate component (src/components/og/OGImageTemplate.tsx)
- All OG images follow 1200x630px standard and global minimalist design system

These file-based OG images are auto-detected by Next.js without manual metadata configuration.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ericyangpan

src/app/[locale]/articles/[slug]/opengraph-image.tsx

@@ -0,0 +1,31 @@
+import { ImageResponse } from 'next/og'
+import { OGImageTemplate } from '@/components/og/OGImageTemplate'
+import { getArticle } from '@/lib/data/fetchers'
+
+export const size = { width: 1200, height: 630 }
+export const contentType = 'image/png'
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>
+}
+
+export default async function Image({ params }: Props) {
+  const { locale, slug } = await params
+  const article = await getArticle(slug, locale)
+
+  if (!article) {
+    return new ImageResponse(
+      <OGImageTemplate
+        category="ARTICLE"
+        title="AI Coding Stack"
+        description="Insights and guides for AI-powered development"
+      />,
+      { ...size }
+    )
+  }
+
+  return new ImageResponse(
+    <OGImageTemplate category="ARTICLE" title={article.title} description={article.description} />,
+    { ...size }
+  )
+}

src/app/[locale]/articles/opengraph-image.tsx

@@ -0,0 +1,24 @@
+import { ImageResponse } from 'next/og'
+import { getTranslations } from 'next-intl/server'
+import { OGImageTemplate } from '@/components/og/OGImageTemplate'
+
+export const size = { width: 1200, height: 630 }
+export const contentType = 'image/png'
+
+interface Props {
+  params: Promise<{ locale: string }>
+}
+
+export default async function Image({ params }: Props) {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: 'components.header' })
+
+  return new ImageResponse(
+    <OGImageTemplate
+      category="ARTICLES"
+      title={t('articles')}
+      description="Insights, guides, and best practices for AI-powered development"
+    />,
+    { ...size }
+  )
+}

src/app/[locale]/clis/[slug]/opengraph-image.tsx

@@ -0,0 +1,37 @@
+import { ImageResponse } from 'next/og'
+import { OGImageTemplate } from '@/components/og/OGImageTemplate'
+import type { Locale } from '@/i18n/config'
+import { getCLI } from '@/lib/data/fetchers'
+
+export const size = { width: 1200, height: 630 }
+export const contentType = 'image/png'
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>
+}
+
+export default async function Image({ params }: Props) {
+  const { locale, slug } = await params
+  const cli = await getCLI(slug, locale as Locale)
+
+  if (!cli) {
+    return new ImageResponse(
+      <OGImageTemplate
+        category="AI CODING ASSISTANT CLI"
+        title="AI Coding Stack"
+        description="Discover the best AI coding CLI tools for developers"
+      />,
+      { ...size }
+    )
+  }
+
+  return new ImageResponse(
+    <OGImageTemplate
+      category="AI CODING ASSISTANT CLI"
+      title={cli.name}
+      description={cli.description}
+      vendor={cli.vendor}
+    />,
+    { ...size }
+  )
+}

src/app/[locale]/clis/opengraph-image.tsx

@@ -0,0 +1,24 @@
+import { ImageResponse } from 'next/og'
+import { getTranslations } from 'next-intl/server'
+import { OGImageTemplate } from '@/components/og/OGImageTemplate'
+
+export const size = { width: 1200, height: 630 }
+export const contentType = 'image/png'
+
+interface Props {
+  params: Promise<{ locale: string }>
+}
+
+export default async function Image({ params }: Props) {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: 'pages.clis' })
+
+  return new ImageResponse(
+    <OGImageTemplate
+      category="AI CODING ASSISTANT CLIS"
+      title={t('title')}
+      description={t('subtitle')}
+    />,
+    { ...size }
+  )
+}

src/app/[locale]/extensions/[slug]/opengraph-image.tsx

@@ -0,0 +1,37 @@
+import { ImageResponse } from 'next/og'
+import { OGImageTemplate } from '@/components/og/OGImageTemplate'
+import type { Locale } from '@/i18n/config'
+import { getExtension } from '@/lib/data/fetchers'
+
+export const size = { width: 1200, height: 630 }
+export const contentType = 'image/png'
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>
+}
+
+export default async function Image({ params }: Props) {
+  const { locale, slug } = await params
+  const extension = await getExtension(slug, locale as Locale)
+
+  if (!extension) {
+    return new ImageResponse(
+      <OGImageTemplate
+        category="AI CODING EXTENSION"
+        title="AI Coding Stack"
+        description="Discover the best AI coding extensions for your IDE"
+      />,
+      { ...size }
+    )
+  }
+
+  return new ImageResponse(
+    <OGImageTemplate
+      category="AI CODING EXTENSION"
+      title={extension.name}
+      description={extension.description}
+      vendor={extension.vendor}
+    />,
+    { ...size }
+  )
+}

src/app/[locale]/extensions/opengraph-image.tsx

@@ -0,0 +1,24 @@
+import { ImageResponse } from 'next/og'
+import { getTranslations } from 'next-intl/server'
+import { OGImageTemplate } from '@/components/og/OGImageTemplate'
+
+export const size = { width: 1200, height: 630 }
+export const contentType = 'image/png'
+
+interface Props {
+  params: Promise<{ locale: string }>
+}
+
+export default async function Image({ params }: Props) {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: 'pages.extensions' })
+
+  return new ImageResponse(
+    <OGImageTemplate
+      category="AI CODING EXTENSIONS"
+      title={t('title')}
+      description={t('subtitle')}
+    />,
+    { ...size }
+  )
+}

src/app/[locale]/ides/[slug]/opengraph-image.tsx

@@ -0,0 +1,37 @@
+import { ImageResponse } from 'next/og'
+import { OGImageTemplate } from '@/components/og/OGImageTemplate'
+import type { Locale } from '@/i18n/config'
+import { getIDE } from '@/lib/data/fetchers'
+
+export const size = { width: 1200, height: 630 }
+export const contentType = 'image/png'
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>
+}
+
+export default async function Image({ params }: Props) {
+  const { locale, slug } = await params
+  const ide = await getIDE(slug, locale as Locale)
+
+  if (!ide) {
+    return new ImageResponse(
+      <OGImageTemplate
+        category="AI-POWERED IDE"
+        title="AI Coding Stack"
+        description="Discover the best AI coding tools and IDEs for developers"
+      />,
+      { ...size }
+    )
+  }
+
+  return new ImageResponse(
+    <OGImageTemplate
+      category="AI-POWERED IDE"
+      title={ide.name}
+      description={ide.description}
+      vendor={ide.vendor}
+    />,
+    { ...size }
+  )
+}

src/app/[locale]/ides/opengraph-image.tsx

@@ -0,0 +1,20 @@
+import { ImageResponse } from 'next/og'
+import { getTranslations } from 'next-intl/server'
+import { OGImageTemplate } from '@/components/og/OGImageTemplate'
+
+export const size = { width: 1200, height: 630 }
+export const contentType = 'image/png'
+
+interface Props {
+  params: Promise<{ locale: string }>
+}
+
+export default async function Image({ params }: Props) {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: 'pages.ides' })
+
+  return new ImageResponse(
+    <OGImageTemplate category="AI-POWERED IDES" title={t('title')} description={t('subtitle')} />,
+    { ...size }
+  )
+}

src/app/[locale]/model-providers/[slug]/opengraph-image.tsx

@@ -0,0 +1,36 @@
+import { ImageResponse } from 'next/og'
+import { OGImageTemplate } from '@/components/og/OGImageTemplate'
+import type { Locale } from '@/i18n/config'
+import { getModelProvider } from '@/lib/data/fetchers'
+
+export const size = { width: 1200, height: 630 }
+export const contentType = 'image/png'
+
+interface Props {
+  params: Promise<{ locale: string; slug: string }>
+}
+
+export default async function Image({ params }: Props) {
+  const { locale, slug } = await params
+  const provider = await getModelProvider(slug, locale as Locale)
+
+  if (!provider) {
+    return new ImageResponse(
+      <OGImageTemplate
+        category="AI MODEL PROVIDER"
+        title="AI Coding Stack"
+        description="Discover leading AI model providers and platforms"
+      />,
+      { ...size }
+    )
+  }
+
+  return new ImageResponse(
+    <OGImageTemplate
+      category="AI MODEL PROVIDER"
+      title={provider.name}
+      description={provider.description}
+    />,
+    { ...size }
+  )
+}

src/app/[locale]/model-providers/opengraph-image.tsx

@@ -0,0 +1,24 @@
+import { ImageResponse } from 'next/og'
+import { getTranslations } from 'next-intl/server'
+import { OGImageTemplate } from '@/components/og/OGImageTemplate'
+
+export const size = { width: 1200, height: 630 }
+export const contentType = 'image/png'
+
+interface Props {
+  params: Promise<{ locale: string }>
+}
+
+export default async function Image({ params }: Props) {
+  const { locale } = await params
+  const t = await getTranslations({ locale, namespace: 'pages.modelProviders' })
+
+  return new ImageResponse(
+    <OGImageTemplate
+      category="AI MODEL PROVIDERS"
+      title={t('title')}
+      description={t('subtitle')}
+    />,
+    { ...size }
+  )
+}