Next.js Notion Starter Kit 项目中的社交图片生成优化方案

Next.js Notion Starter Kit 是一个基于Next.js和Notion API的快速建站工具，它允许开发者轻松地将Notion页面转化为功能完善的网站。在最新版本中，项目引入了一个社交图片生成功能，用于自动为页面创建分享时使用的预览图。

问题背景

在Vercel免费版部署环境下，项目中的社交图片生成功能遇到了一个关键限制。该功能通过Edge Function实现，但生成的函数体积超过了Vercel免费账户1MB的限制，达到了1.11MB。这主要是由于项目中同时打包了Inter字体的半粗体(interSemiBoldFont)和常规体(interRegularFont)两种字体文件所致。

技术分析

Edge Function是Vercel提供的一种轻量级无服务器函数，运行在全球分布的边缘节点上，能够快速响应用户请求。免费账户对这类函数有严格的体积限制，主要是为了确保边缘节点的资源能够高效利用。

在社交图片生成场景中，字体文件通常是函数体积的主要贡献者。Inter字体是一个流行的开源字体家族，包含多种字重(weight)变体。项目中同时引入两种字重变体确实会显著增加最终的打包体积。

解决方案

经过技术评估，项目维护者采取了以下优化措施：

1. 精简字体使用：移除了常规体(interRegularFont)的引入，仅保留半粗体(interSemiBoldFont)。在大多数社交图片场景中，标题和关键信息使用粗体字已经足够满足视觉需求。

2. 字体优化考虑：虽然也可以考虑使用字体子集化技术来减小字体文件体积，但这种方法会增加构建复杂度。在当前阶段，精简字体使用是最直接有效的解决方案。

实施效果

这一变更成功将Edge Function的体积控制在1MB的限制内，同时保持了社交图片的基本功能和视觉效果。对于大多数用户来说，仅使用单一字重的字体并不会明显影响生成的图片质量，特别是在主要显示标题和简短描述的社交分享场景中。

最佳实践建议

对于使用Next.js Notion Starter Kit的开发者，如果遇到类似限制，可以考虑：

1. 评估实际需求，确定是否真的需要多种字重
2. 对于必须使用多种字体的场景，可以考虑按需加载或使用更轻量级的字体替代方案
3. 定期检查依赖项的更新，有时新版本可能已经进行了优化

这一优化案例展示了在实际项目中如何平衡功能需求和平台限制，通过合理的取舍实现最佳的用户体验。