基于 Next.js App Router 的 Remotion 编程化视频应用模板从 Player 预览到 Lambda 云端渲染【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion本篇技术指南围绕仓库中的packages/template-next-app模板展开它是一款把 Next.jsApp Router与remotion/player预览、remotion/lambda云端渲染深度集成的前端样板工程适用于浏览器输入参数 → 实时预览视频 → 一键调 AWS Lambda 渲染 MP4 并下载这类编程化视频应用。读完本文你将掌握该模板的目录职责、全部脚本命令、config.mjs部署参数的语义、deploy.mjs的云端部署链路以及从前端到 Lambda API 路由再到轮询进度的完整渲染编排流程可直接在此基础上二次开发。模板定位给视频即应用的一站式起点这份模板解决的核心问题是如何把用 React 编写视频变成真正的 Web 产品。它开箱即用地内置了两大 Remotion 能力remotion/player在 Next.js 页面内嵌视频播放器让用户在网页上即时预览、交互式调整参数该模板中表现为实时修改标题文字remotion/lambda把 Remotion Bundle 与渲染函数部署到 AWS按需触发云端渲染免去自建渲染服务器的成本与维护。模板基于 Next.js 的App 目录App Router构建。在 package.json 的依赖中可以看到技术栈选型next、react/react-dom、remotion与remotion/bundler、remotion/cli、remotion/lambda、remotion/player、remotion/google-fonts、remotion/paths、remotion/shapes并使用zod作为前后端共享的入参校验层。同一代码库中还提供了该模板的衍生形态Tailwind CSS 版见 packages/template-next-app-tailwindPages 目录版见 packages/template-next-pages。快速开始两条脚手架路径模板 README 提供了两种开始方式任选其一即可方式一GitHub 模板克隆。点击 Use this template 将该模板复制到自己的 GitHub 账号后先安装依赖npm i方式二用 create-video 直接生成。使用 Remotion 官方的脚手架命令创建 Next.js 模板工程npx create-videolatest --next该脚手架对应的模板本体位于仓库的 packages/template-next-app 目录中create-video的实现可参见 packages/create-video。克隆或生成完成后代码结构即与模板保持一致。命令速查日常开发与渲染模板 README 明确给出了五个核心命令其中前四个用于日常开发最后一个用于部署命令作用npm run dev启动 Next.js 开发服务器实质为next dev见 package.json 的scriptsnpm run remotion打开 Remotion Studio 可视化编辑器实质为remotion studionpx remotion render在本地渲染一段视频npx remotion upgrade将 Remotion 相关依赖升级到新版本node deploy.mjs把 Remotion Bundle 和 Lambda 渲染函数部署到 AWS其中deploy.mjs是部署动作的入口。文档特别强调在以下三种情况发生后应当重新执行部署脚本以保证云端代码与本地一致修改了视频模板Remotion 组合内容修改了config.mjs中的部署配置将 Remotion 升级到了更新的版本。云端渲染能力在 AWS Lambda 上渲染视频模板支持通过 Remotion Lambda 渲染视频这也是模板相对本地开发最具差异化的能力。完整的初始化路径为复制.env.example为.env并填入环境变量编辑根目录的config.mjs按需调整 Lambda 设置执行node deploy.mjs完成 Lambda 函数与 Remotion Bundle 的部署。AWS 凭据的申请流程可对照仓库内的 Lambda 搭建文档 完成。从 deploy.mjs 的源码可以看到模板支持两套环境变量命名即AWS_ACCESS_KEY_ID/AWS_SECRET_ACCESS_KEY或带REMOTION_前缀的REMOTION_AWS_ACCESS_KEY_ID/REMOTION_AWS_SECRET_ACCESS_KEYdeploy.mjs会在两者皆缺失时打印引导提示并以process.exit(0)温和退出而不是直接抛错。config.mjs一处修改、全链路生效的部署配置config.mjs 是整个模板的配置中心全部关键参数集中于此/** * Use autocomplete to get a list of available regions. * type {import(remotion/lambda).AwsRegion} */ export const REGION us-east-1; export const SITE_NAME my-next-app; export const RAM 3009; export const DISK 10240; export const TIMEOUT 240;各参数含义如下REGIONAWS 区域声明类型为remotion/lambda的AwsRegion因此在支持类型提示的编辑器中输入该常量可自动补全可用区域列表模板默认us-east-1SITE_NAME部署到 S3 的站点Remotion Bundle名称同时作为渲染时的serveUrlRAMLambda 函数的内存上限单位 MB默认3009DISKLambda 临时磁盘空间单位 MB默认1024010 GBTIMEOUTLambda 函数的超时时间单位秒默认240。值得注意的一点是这份配置既作用于部署脚本也作用于 API 路由。render/route.ts 和 progress/route.ts 会直接从../../../../../config.mjs导入DISK、RAM、REGION、TIMEOUT等值并通过speculateFunctionName({diskSizeInMb, memorySizeInMb, timeoutInSeconds})推算出与deploy.mjs部署出的函数完全一致的函数名。这意味着部署时用什么参数调用时就请求哪个函数从机制上保证二者始终同步——这正是文档要求修改config.mjs后重跑部署脚本的根本原因。deploy.mjs三次调用完成云端就绪deploy.mjs 按顺序完成三个步骤对应remotion/lambda的三大 APIdeployFunction(...)部署渲染函数传入createCloudWatchLogGroup: true、memorySizeInMb: RAM、timeoutInSeconds: TIMEOUT、diskSizeInMb: DISK、region: REGION返回functionName与alreadyExisted标志控制台打印(created)或(already existed)getOrCreateBucket(...)确保渲染所需的 S3 Bucket 存在不存在则创建用于承载 Bundle 站点与渲染中间产物deploySite(...)部署站点指定bucketName、entryPoint为src/remotion/index.ts、siteName: SITE_NAME与region把 Remotion Bundle 上传至云端。三步全部成功后脚本输出 You now have everything you need to render videos!并再次提醒改动视频模板、config.mjs或升级 Remotion 后需重跑本脚本。工程结构与前后端分工模板的src目录按职责划分清晰可以从仓库文件布局直接读懂整个应用src/ ├── app/ # Next.js App Router │ ├── api/lambda/render/route.ts # 触发云端渲染的 API 路由POST │ ├── api/lambda/progress/route.ts # 查询渲染进度的 API 路由POST │ ├── layout.tsx # 根布局 │ └── page.tsx # 首页Player 预览 渲染控制 ├── components/ # UI 组件Button、Spinner、ProgressBar 等 ├── helpers/ # api-response、use-rendering渲染状态机 ├── lambda/api.ts # 前端封装的 Lambda 客户端方法 ├── remotion/ # Remotion 组合本体 │ ├── index.ts # registerRoot(RemotionRoot) │ ├── Root.tsx # 注册 Composition │ └── MyComp/ # Main.tsx、NextLogo.tsx 等视频画面组件 └── types/ # 前后端共享的 Zod schema 与常量 ├── constants.ts └── schema.ts视频参数的一处定义、多处复用视频的基本规格被收敛在 constants.ts页面预览与 Lambda 渲染共用同一组数值export const COMP_NAME MyComp; export const DURATION_IN_FRAMES 200; export const VIDEO_WIDTH 1280; export const VIDEO_HEIGHT 720; export const VIDEO_FPS 30;入参则用 Zod 定义并共享CompositionProps z.object({ title: z.string() })默认标题为 Next.js and Remotion。同一 schema 既被 schema.ts 中的RenderRequest/ProgressRequest引用用于服务端校验也被首页用于构造inputProps前后端类型由推导天然一致。Remotion 组合的注册入口Remotion 的注册链从 index.ts 的registerRoot(RemotionRoot)开始。Root.tsx 中注册了两支组合MyComp主视频组合时长 200 帧、30 fps、1280×720组件为Main接收title默认参数NextLogo一支 300 帧、140×140 的 Logo 演示组合组件为NextLogo。视频画面的具体实现标题文字渐显、几何图形动画等位于MyComp子目录下的 Main.tsx、TextFade.tsx、Rings.tsx、NextLogo.tsx可据此了解 Remotion 组合如何用纯 React 描述时间轴动画。端到端渲染链路Player 预览 → Lambda → 轮询下载整个应用的前后端协作可以用一条完整链路概括这也是理解该模板最具价值的部分。第一步页面内嵌预览。page.tsx 使用remotion/player的Player组件渲染Maincomponent{Main}、durationInFrames、fps、compositionHeight/compositionWidth均取自共享常量并开启controls、autoPlay、loop、initiallyMuted。输入框中的文本通过useState实时写回inputProps用户在浏览器里就能看到改字 → 视频即刻变化的交互效果。第二步发起渲染请求。RenderControls.tsx 中的 Render video 按钮调用useRendering()来自 helpers/use-rendering.ts。该 Hook 内部先经 lambda/api.ts 的renderVideo()向后端POST /api/lambda/render请求体包含id组合名即COMP_NAME与inputProps。第三步服务端触发 Lambda。路由处理器 render/route.ts 使用来自remotion/lambda/client的renderMediaOnLambda发起渲染关键参数包括codec: h264——输出 H.264 编码的 MP4functionName——由speculateFunctionName依据config.mjs推算serveUrl: SITE_NAME——消费deploy.mjs已上传的站点composition: body.id、inputProps: body.inputPropsframesPerLambda: 10——每个 Lambda 实例渲染的帧数切分downloadBehavior: { type: download, fileName: video.mp4 }——输出以附件形式下载并命名为video.mp4。第四步前端轮询进度。渲染是异步长任务前端拿到renderId与bucketName后进入轮询getProgress()每隔 1 秒请求/api/lambda/progressprogress/route.ts 在服务端调用getRenderProgress并归一化为三种响应遇fatalErrorEncountered时返回{type: error, message}渲染完成done时返回{type: done, url, size}否则返回{type: progress, progress}其中进度值取Math.max(0.03, overallProgress)保证进度条起始可见。第五步UI 状态机收敛。use-rendering.ts 用一个判别联合类型State管理完整生命周期init→invoking→rendering携带 0~1 的 progress→done携带下载 URL 与文件大小或error渲染成功后页面切换到进度条 下载按钮视图DownloadButton直接使用云端返回的url完成下载undo()则把状态重置回初始态。此外所有 API 路由都经 api-response.ts 中泛型化的executeApi包装先用传入的 Zodschema解析请求体成功时返回{type: success, data}解析失败或处理器抛错时返回 HTTP 500 与{type: error, message}从而在前后端共享统一的ApiResponse判别类型。这套校验 统一响应 状态机轮询的模式可直接复用到你自己的渲染场景。从模板到产品可继续深入的方向本地快速验证先用npm run remotion打开 Studio 迭代画面再以npx remotion render在本地出片逻辑成熟后再切到 Lambda 链路替换视频组合编辑src/remotion/下的组件、Root.tsx的注册与constants.ts的规格后重跑node deploy.mjs即可让云端生效扩展入参由于CompositionProps、RenderRequest/ProgressRequest均由同一 Zod schema 驱动为视频新增参数时只需同步修改 constants.ts 与 schema.ts升级依赖执行npx remotion upgrade升级后务必重跑node deploy.mjs保持 Bundle、函数与 SDK 版本一致。最后提醒授权事项Remotion 遵循其 LICENSE.md 中声明的授权条款README 明确指出部分使用主体需要购买公司许可证商用前请对照条款确认自身场景。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考