为了清楚一个更好的UI，您可以在我的个人博客上阅读此博客文章：Creating Auto Dynamic OG Images for Your Next.js Application with Serverless Functions
如果您有博客或网站，则可能需要创建在社交媒体平台上共享内容时使用的开放图（OG）图像。当某人在社交媒体上共享您的内容时，会显示OG图像，并且它们有助于为共享内容提供背景并使其更具视觉吸引力。
在本教程中，我们将研究如何使用serverless函数在Next.js应用程序中创建动态OG图像。我们将使用@vercel/og软件包在serverlessfunction中创建OG图像。
我们开始启动之前，您需要设置下一个。如果您还没有一个，则可以通过运行以下命令来创建一个新的next.js项目：
npx create-next-app
安装@vercel/og软件包：
npm install @vercel/og
现在我们已经安装了必要的软件包，我们可以创建将生成OG图像的serverless函数。为此，请在您的下一个项目的API文件夹中创建一个og.js，并在文件顶部导入ImageResponse类：
import { ImageResponse } from '@vercel/og';
接下来，我们将将无服务器函数的运行时间设置为“ config对象：
”中的“边缘”
export const config = {
runtime: 'edge',
};
这将确保该函数在Edge网络上执行，这是创建OG images所必需的。
现在，让我们定义serverless函数的主处理程序函数：
export default function handler(req) {
try {
const { searchParams } = new URL(req.url);
// code for generating the OG image goes here
} catch (e) {
return new Response(`Failed to generate the image`, {
status: 500,
});
}
}
此功能将请求对象作为参数，并返回 og 图像响应。如果在生成图像时发生错误，它将返回以500状态和错误消息的响应。
现在，让我们开始添加用于生成 og 图像的代码。首先，我们将从请求URL解析搜索参数：
const { searchParams } = new URL(req.url);
然后，我们将检查标题搜索参数是否存在于查询字符串中：
const hasTitle = searchParams.has('title');
如果存在title参数，我们将其切成100个字符，并将其分配给标题变量，如果不存在title参数，我们将标题变量设置为“ DevTomars”的默认值：< br>
const title = hasTitle
? searchParams.get('title')?.slice(0, 100)
: 'DevToMars';
接下来，我们从查询字符串中检索mainTopics搜索参数，然后使用拆分方法将其拆分为数组：
const mainTopics = searchParams.get('mainTopics').split(",")
这使我们能够将多个主要主题作为查询字符串中的逗号分隔列表传递。
现在我们拥有标题和mainTopics变量，我们可以使用它们来渲染OG图像。为此，我们使用@vercel/og软件包中的ImageResponse类，这使我们能够从React组件中创建 og 图像。
我们通过一个简单的DIV元素，其中一些内联样式将其应用于ImageResponse类作为React组件。样式指定 og 图像的布局和外观：
return new ImageResponse(
(
<div
style={{
backgroundColor: 'black',
backgroundSize: '150px 150px',
height: '100%',
width: '100%',
display: 'flex',
textAlign: 'center',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
flexWrap: 'nowrap',
padding: "65px",
}}
>
{/* The Body of the Image */}
</div>
您可以看到，我们将DIV显示为flex，因为Next.js需要为每个孩子的每个元素都需要此功能。您可以使用Tailwindcss进行造型，但我不建议它，因为它不稳定，并且不完全支持使用Next.js生成图像。
我们的图像将包含一个title，该title填充了图像宽度的75%，上面有一些填充物和30px的margin-top，带有品牌名称的徽标以及主题标签的列表。 ：
...
<div style={{
fontSize: 60,
fontStyle: 'normal',
letterSpacing: '-0.025em',
color: 'white',
marginTop: 30,
padding: '0 100px',
lineHeight: 1.4,
whiteSpace: 'pre-wrap',
height: "75%",
fontWeight: 700,
textTransform: "capitalize"
}} className="w-10 capitalize">
{title}
</div>
<div style={{ display: "flex", flexDirection: "row", gap: "10px", alignItems: "center" }} >
<div style={{ width: "70px", height: "70px", display: "flex" }}>
<img
src="https://media.graphassets.com/gncWvSEqRFaBSUPZGoTP"
width={70}
height={70}
alt="devtomars blog"
/>
</div>
<div style={{
backgroundClip: "text",
color: "transparent",
backgroundImage: "linear-gradient(to right, #ec4899, #8b5cf6)",
fontWeight: 700,
fontSize: 30
}} >DevToMars</div>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "flex-end", justifyItems: "center",width: "75%" }}>
{
mainTopics.map((topic, i) => (
<div key={i} style={{ color: "black", fontSize: 20, padding: "5px", margin: "3px", backgroundColor: "white", borderRadius: "8px" }}>{topic}</div>
))
}
</div>
</div>
...
最后，我们通过一个选项对象创建 og 图像，宽度为1200像素，高度为630像素：
return new ImageResponse(
// JSX element here
{
width: 1200,
height: 630,
},
);
就是这样！现在，您拥有一个serverless函数，可以为您的Next.js应用程序生成动态 og 图像。要使用该函数，只需使用所需标题和mainTopics查询参数向函数的URL提出请求。例如：
https://your-next-app.vercel.app/api/og?title=My Blog Post&mainTopics=nodejs,javascript,react
这将生成带有标题“我的博客文章”和主要主题“ nodejs”，“ javascript”和“ react”的OG图像。
然后，您可以在社交媒体共享标签中使用生成的OG图像，例如：
<meta property="og:image" content="https://your-next-app.vercel.app/api/og?title=My Blog Post&mainTopics=nodejs,javascript,react" />
就是这样！现在，您知道如何使用无服务器函数为Next.js应用程序创建动态OG图像。我希望本教程很有帮助！