Optimize OG Image Error

[xingfanxia]

Describe the bug

Build Error On Vercel with NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_OG_IMAGES = 1 with R2 Storage, this error doesn't trigger with
NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTOS = 1

Error occurred prerendering page "/p/Hc2J6Cyt/image". Read more: https://nextjs.org/docs/messages/prerender-error
Error: Image size cannot be determined. Please provide the width and height of the image.
    at In (file:///vercel/path0/node_modules/.pnpm/next@15.1.6_@babel+core@7.24.5_@opentelemetry+api@1.9.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/dist/compiled/@vercel/og/index.node.js:15354:15)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at runNextTicks (node:internal/process/task_queues:64:3)
    at process.processTimers (node:internal/timers:516:9)
    at async Wt (file:///vercel/path0/node_modules/.pnpm/next@15.1.6_@babel+core@7.24.5_@opentelemetry+api@1.9.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/dist/compiled/@vercel/og/index.node.js:16119:16)
    at async Wt (file:///vercel/path0/node_modules/.pnpm/next@15.1.6_@babel+core@7.24.5_@opentelemetry+api@1.9.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/dist/compiled/@vercel/og/index.node.js:16127:22)
    at async Wt (file:///vercel/path0/node_modules/.pnpm/next@15.1.6_@babel+core@7.24.5_@opentelemetry+api@1.9.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/dist/compiled/@vercel/og/index.node.js:16127:22)
    at async Wt (file:///vercel/path0/node_modules/.pnpm/next@15.1.6_@babel+core@7.24.5_@opentelemetry+api@1.9.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/dist/compiled/@vercel/og/index.node.js:16103:42)
    at async Wt (file:///vercel/path0/node_modules/.pnpm/next@15.1.6_@babel+core@7.24.5_@opentelemetry+api@1.9.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/dist/compiled/@vercel/og/index.node.js:16127:22)
    at async Wt (file:///vercel/path0/node_modules/.pnpm/next@15.1.6_@babel+core@7.24.5_@opentelemetry+api@1.9.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/next/dist/compiled/@vercel/og/index.node.js:16103:42)
Export encountered an error on /p/[photoId]/image/route: /p/Hc2J6Cyt/image, exiting the build.
 ⨯ Static worker exited with code: 1 and signal: null
 ELIFECYCLE  Command failed with exit code 1.
Error: Command "pnpm run build" exited with 1

[sambecker]

This sounds like this issue:
vercel/satori#626

I do wonder if using Cloudflare as a CDN could complicate this process, especially if these errors only occur during prerendering

[xingfanxia]

This sounds like this issue: vercel/satori#626

I do wonder if using Cloudflare as a CDN could complicate this process, especially if these errors only occur during prerendering

Changed cloudflare to development mode, same issue.

[xingfanxia]

😂I mean the issue still persists

[sambecker]

Have you tried disabling Cloudflare proxy yet? That should be as simple as clicking the orange cloud on your DNS settings.

You may need to disable it on both subdomains:

• https://portfolio.xiax.xyz
• https://photos.xiax.xyz

[xingfanxia]

oh ok, let me try that

[xingfanxia]

}
Failed to load dynamic font for 互动 . Error: [TypeError: fetch failed] {
  [cause]: [AggregateError: ] { code: 'ETIMEDOUT' }
}
Failed to load dynamic font for 胡须 . Error: [TypeError: fetch failed] {
  [cause]: [AggregateError: ] { code: 'ETIMEDOUT' }
}
   Generating static pages (897/936) 
 ✓ Generating static pages (936/936)
   Finalizing page optimization ...
   Collecting build traces ...```

stills reports error but the build is able  to finish

[xingfanxia]

By the way, I don't see the camera model being included in the tags on the home page. Is it possible to also include that?

[sambecker]

I don't see the camera model being included

I'm seeing them it's just that they're under hundreds of tags!

[sambecker]

stills reports error but the build is able to finish

That may be as good as it gets? I'll keep an eye out on this one.

Out of curiosity, did the builds finish before?

Did you see an stability improvements by disabling Cloudflare proxy?

[xingfanxia]

oh haha... AI generated way too many tags..
Yeah disable proxy makes the build finish. It wasn't before disabling.

[sambecker]

disable proxy makes the build finish

Very good to know!

AI generated way too many tags

I'm thinking about changing the default AI generation content to be title,semantic instead of all. What do you think about that?

[xingfanxia]

disable proxy makes the build finish

Very good to know!

AI generated way too many tags

I'm thinking about changing the default AI generation content to be title,semantic instead of all. What do you think about that?

I think tags are still helpful but we need to make some constraints so the AI don't generate different tags for similar meanings. For my branch I used this prompt

'tags': `First, identify which ONE genre best describes this image from ONLY these options: portrait photography (人像摄影), landscape photography (风光摄影), animal photography (动物摄影), street photography (街拍摄影), event photography (活动摄影).

Then generate exactly 10 tags following this strict structure for both English and Chinese. IMPORTANT: Generate ONLY the tags - do not include any messages about people identification or any other explanatory text.

English tags (first 5):
1. The genre you identified above
2. ONE mood from ONLY these options: serene, dramatic, intimate, nostalgic, ethereal, dynamic, contemplative, minimalist, mysterious, melancholic, peaceful, vibrant, dreamy, solemn, whimsical, tranquil, bold, tender, moody, graceful
3. ONE lighting from ONLY these options: golden hour, harsh light, soft light, backlit, low key, high key, natural light, artificial light, dappled light, rim light, twilight, overcast, directional, diffused, shadow play, window light, ambient, dramatic light, silhouette, mixed lighting
4. ONE scene type from ONLY these options: urban scene, natural vista, interior space, street scene, waterfront, architecture, rural life, abstract, cityscape, mountain view, coastal scene, forest scene, industrial, park life, suburban, night scene, desert scene, garden view, historic site, modern space
5. ONE composition focus from ONLY these options: leading lines, negative space, geometric shapes, framing, layers, color harmony, shadows, details, symmetry, rule of thirds, diagonal lines, minimalism, texture, patterns, reflections, depth of field, contrast, curves, perspective, repetition

Chinese tags (next 5):
1. The genre's Chinese translation as provided above
2. Mood translation: 宁静, 戏剧性, 私密, 怀旧, 空灵, 动感, 沉思, 极简, 神秘, 忧郁, 平和, 鲜活, 梦幻, 庄重, 异想, 恬静, 大胆, 温柔, 氛围, 优雅
3. Lighting translation: 黄金光, 强光, 柔光, 逆光, 低调, 高调, 自然光, 人工光, 斑驳光, 边缘光, 暮光, 阴天, 定向光, 漫射光, 光影, 窗光, 环境光, 戏剧光, 剪影, 混合光
4. Scene translation: 都市, 自然景观, 室内, 街景, 滨水, 建筑, 乡村, 抽象, 城市全景, 山景, 海景, 林景, 工业, 公园, 郊区, 夜景, 沙漠, 园景, 古迹, 现代
5. Composition translation: 引导线, 留白, 几何, 构图, 层次, 色彩, 阴影, 细节, 对称, 三分法, 斜线, 简约, 质地, 图案, 倒影, 景深, 对比, 曲线, 透视, 重复

Format your response as a simple comma-separated list. Do not include any additional text or messages. Example: "landscape photography, serene, natural light, natural vista, leading lines, 风光摄影, 宁静, 自然光, 自然景观, 引导线"`,

[sambecker]

This is great! Will revisit the tag prompt.