14.6 Open Graph分享

---

1. 为什么要学这个?

你分享了文章 A，封面是网站 Logo。 你分享了文章 B，封面还是网站 Logo。 用户觉得这些文章都是一样的，没兴趣点。

你希望能像 Notion 或 GitHub 一样，自动把文章标题、作者、阅读时间印在封面上，让每一张分享图都像是专属定制的海报。

---

2. 核心概念：Edge Image Generation

Next.js (基于 @vercel/og) 提供了一个非常黑科技的功能： 它在 Edge Function (边缘节点) 运行。 它接受 JSX (HTML/CSS)，并在毫秒级时间内将其渲染并截图为 PNG。

优势：

1. 速度快：比传统的 Puppeteer 截图快 10 倍。
2. 即时性：改了标题，图片立马变。
3. 个性化：甚至可以把访问者的名字印上去。

---

3. 解决方案 (HOW)

3.1 创建 opengraph-image.tsx

在 app/posts/[slug]/ 目录下新建 opengraph-image.tsx。

import { ImageResponse } from 'next/og'

export const runtime = 'edge' // 必须运行在 edge

export const alt = '文章封面'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug)

  return new ImageResponse(
    (
      // 就像写 React 组件一样，但只能用部分 CSS 特性 (flexbox)
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          background: 'linear-gradient(to bottom right, #e0e7ff, #c7d2fe)',
          color: '#3730a3',
        }}
      >
        <div style={{ fontSize: 96, fontWeight: 'bold' }}>{post.title}</div>
        <div style={{ fontSize: 48, marginTop: 40 }}>Vibe Coding Tutorial</div>
      </div>
    ),
    { ...size }
  )
}

3.2 动态渲染流程图

graph TD
    Twitter["Twitter 爬虫"] -->|"Step 1: 请求图片 URL"| Edge["Edge Function"]
    
    subgraph Satori ["渲染引擎 (@vercel/og)"]
        JSX["JSX 代码"] --> HTML["HTML/CSS"]
        HTML --"Step 2: 布局计算"--> SVG["SVG 矢量图"]
    end
    
    Edge --> JSX
    SVG --"Step 3: 栅格化"--> PNG["PNG 图片"]
    
    Edge --"Step 4: 返回二进制流"--> Twitter
    
    style Edge fill:#e1bee7,stroke:#8e24aa
    style Satori fill:#c8e6c9,stroke:#2e7d32

---

4. 避坑指南

❌ 不要这样做	✅ 应该这样做	为什么
复杂 CSS	Flexbox	Satori 引擎不支持 Grid 或 Float。只用最基础的 Flexbox 布局。
Node.js Runtime	Edge Runtime	生成图片非常吃 CPU。Edge 环境启动极快，能在 Twitter 爬虫超时的几秒内返回图片。
本地字体	加载字体文件	中文必须加载 .ttf 字体文件，否则全是乱码 (Tofu)。需要 fetch 一个字体文件传给 ImageResponse。

---

5. 真实案例

---

6. 本章小结

1. ImageResponse：是前端生成图片的魔法。
2. JSX：用写代码的方式画图。
3. Unique：让你的每一个链接都与众不同。