SuperAPI AI 工具集

build-tinacms-nextjs

前端与建站

查看项目

更新于 10-16 06:16

技能介绍

用途:帮助构建、扩展和调试以 TinaCMS 作为内容层的 Next.js App Router 站点,涵盖 Git 支持的 MDX/JSON 内容、其上的 GraphQL 层,以及可选的可视化编辑。适合“为 Next.js 14/15/16 App Router 站点添加 TinaCMS”“在 tina/config.ts 中建模 posts/pages/blocks 集合”“用 useTina 与 <TinaMarkdown> 渲染 MDX/富文本”“接入可视化编辑、草稿模式、data-tina-field、proxy.ts 或实时预览”“将 TinaCloud 站点部署到 Vercel 或用 Clerk + MongoDB 自托管后端”“排查 tinacms build 失败、生成客户端缺失、schema/MDX 报错、Vercel 缓存过期或后台鉴权问题”“从 Pages Router 或 TinaCloud 迁移”。不适用于:没有 TinaCMS 的普通 Next.js 项目、先将 URL/HTML 转 Next.js 的转换任务、以 Pages Router 为主的目标、Cloudflare Workers 等边缘运行时后端。

主要能力:先通过仓库扫描识别项目形态(如是否存在 tina/config.ts、tina/tina-lock.json、tina/generated、package.json 中的 tinacms 依赖、tinacms dev -c "next dev" 脚本、import { useTina }、@/tina/generated/client、app/api/tina/[...routes]/route.ts、TinaCloud 环境变量、proxy.ts/middleware.ts),再按意图跳到最小参考集并产出改动。

关键规则:useTina 是客户端 Hook;服务端组件用生成客户端取 { data, query, variables },由 "use client" 子组件调用 useTina(props)。data-tina-field 必须落在真实 DOM 元素上。CI 需先 tinacms build 再 next build。tinacms 与 @tinacms/* 版本需统一。提交 tina/tina-lock.json,不提交 tina/generated/。tina/config.* 不引入前端依赖。字段名仅限字母数字和下划线。Vercel + TinaCMS 需显式传 fetchOptions: { next: { revalidate: N } }。Next 15+ 的 params、searchParams、draftMode()、cookies()、headers() 均为异步。代理不得拦截 /admin、/api/preview、/api/tina/*。自托管后端仅限 Node 运行时。

后端选择:TinaCloud 走托管鉴权与 API,适合快速路径与 GitHub 集成;自托管适合自定义鉴权、存储、私有网络和企业控制。使用方式与限制的完整细分见技能内 references 目录,资料未提供更多细节。