楚沐风1. 项目背景与需求分析
作为一名长期活跃在小红书的内容创作者，我深刻体会到高质量配图对于笔记传播的重要性。每次发布内容前，最耗费时间的环节往往不是写作，而是寻找或制作符合平台调性的封面和配图。市面上的设计工具要么功能过于复杂，要么缺乏针对小红书平台的优化模板，这促使我萌生了开发专属工具的想法。
Next.js作为React的全栈框架，在构建需要SEO优化的内容型网站方面具有天然优势。它支持服务端渲染(SSR)和静态生成(SSG)，这对工具类网站的加载速度和搜索引擎友好性至关重要。同时，基于React的组件化开发模式，可以高效实现图片编辑这类交互密集型的应用场景。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构设计
2.1 前端技术选型
核心采用Next.js 13+版本，充分利用其App Router带来的布局优化和资源预加载能力。图片处理层使用Fabric.js这个强大的Canvas库，它提供了完善的图形对象模型和事件系统，能够支持复杂的图片编辑操作。
状态管理方面，考虑到工具站需要维护大量临时编辑状态（如图层、滤镜参数等），采用Zustand这种轻量级方案比Redux更合适。它的API简洁直观，与React的并发模式配合良好，在频繁状态更新时性能表现优异。
2.2 后端服务设计
虽然Next.js本身支持API路由，但考虑到图片处理是计算密集型任务，我选择将这部分逻辑分离到独立的Serverless Function中。具体实现上：
- 使用Sharp库进行服务器端的图片压缩和格式转换
- 通过AWS Lambda部署处理函数，利用其弹性伸缩能力应对流量波动
- 设计Redis缓存层存储热门模板的预处理结果
这种架构既保证了核心编辑功能的实时响应，又能有效控制服务器成本。实测下来，一张1080px的小红书封面图从提交到生成平均只需800ms。
3. 核心功能实现
3.1 画布尺寸预设系统
小红书平台对图片尺寸有严格要求：
- 首页封面：1080×1080px（1:1）或1080×810px（4:3）
- 笔记内图：宽度固定1080px，高度建议在1080-2160px之间
typescript复制const PRESETS = {
COVER_SQUARE: { width: 1080, height: 1080