Build TinaCMS Next.js

Build, extend, and debug a Next.js App Router site whose content layer is TinaCMS (git-backed MDX/JSON, GraphQL on top, optional visual editing). This file is the router: detect the project shape, pick the lane, jump to the smallest reference set, deliver the change, verify it.

When To Use

• "Add TinaCMS to my Next.js 14/15/16 App Router site."
• "Model a posts / pages / blocks collection in tina/config.ts."
• "Render an MDX/rich-text body via useTina and <TinaMarkdown> in app/[slug]/page.tsx."
• "Wire visual editing, draft mode, data-tina-field, proxy.ts, or live preview."
• "Deploy a TinaCloud site to Vercel" or "self-host the Tina backend with Clerk + MongoDB."
• "Debug tinacms build failures, missing generated client, schema/MDX errors, stale Vercel cache, or admin auth."
• "Migrate from Pages Router or from TinaCloud to self-hosted."

Do NOT use this skill for: