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:

• Plain Next.js work with no TinaCMS surface (no tina/, no tinacms in package.json).
• Converting a live URL or HTML snapshot to Next.js before CMS modeling — use convert-url-to-nextjs.
• Pages Router as the primary target — App Router is the trigger; Pages references here are legacy.