Hello, I've had an idea of getting image from deployment preview and use that as a og:image, what I've done is that I wrote this endpoint in /pages/api/og.ts.
When I'll take look at the code, it is clear and it suppose to work, but the endpoint for getting the image is "secured" from fetching without some auth method of yours, my question is, is this funcitonality disabled on purpose, or there's any other solution on that?
1import type { NextApiRequest, NextApiResponse } from "next";23const token = process.env.VERCEL_TOKEN;4const projectName = process.env.VERCEL_PROJECT_NAME;56export default async function handler(7 req: NextApiRequest,8 res: NextApiResponse,9) {10 try {11 if (!token || !projectName) {12 return res.status(500).json({13 error: "Missing VERCEL_TOKEN or VERCEL_PROJECT_NAME",14 });15 }1617 const deploymentsRes = await fetch(18 `https://api.vercel.com/v6/deployments?project=${projectName}&limit=1`,19 {20 headers: {21 Authorization: `Bearer ${token}`,22 },23 },24 );2526 const deploymentsData = await deploymentsRes.json();27 const deploymentId = deploymentsData?.deployments?.[0]?.uid;2829 if (!deploymentId) {30 return res.status(500).json({31 error: "Deployment ID not found",32 debug: deploymentsData,33 });34 }3536 const deploymentDetailRes = await fetch(37 `https://api.vercel.com/v13/deployments/${deploymentId}`,38 {39 headers: {40 Authorization: `Bearer ${token}`,41 },42 },43 );4445 const deploymentDetail = await deploymentDetailRes.json();46 const teamId = deploymentDetail?.team?.id;4748 if (!teamId) {49 return res.status(500).json({50 error: "Team ID not found in deployment detail",51 debug: deploymentDetail,52 });53 }5455 const screenshotUrl = `https://vercel.com/_next/image?url=%2Fapi%2Fscreenshot%3Fdark%3D0%26deploymentId%3D${deploymentId}%26teamId%3D${teamId}%26withStatus%3D1&w=1920&q=75`;5657 console.log("✅ Screenshot URL:", screenshotUrl);5859 const imageResponse = await fetch(screenshotUrl);6061 if (!imageResponse.ok) {62 const errorText = await imageResponse.text();6364 return res.status(500).json({65 error: "Failed to fetch screenshot image",66 response: errorText,67 });68 }6970 const buffer = await imageResponse.arrayBuffer();7172 res.setHeader("Content-Type", "image/png");73 res.setHeader("Cache-Control", "public, max-age=86400");7475 return res.status(200).send(Buffer.from(buffer));76 } catch (err) {77 console.error("[OG] Unexpected error:", err);7879 return res80 .status(500)81 .json({ error: "Unexpected error", detail: String(err) });82 }83}
