build-tinacms-nextjs

Build TinaCMS-powered Next.js App Router sites with MDX/git-backed content.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/yigitkonur/skills-by-yigitkonur-secondary --skill build-tinacms-nextjs
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: build-tinacms-nextjs
Source: https://github.com/yigitkonur/skills-by-yigitkonur-secondary/tree/main/skills/build-tinacms-nextjs
Command: npx skills add https://github.com/yigitkonur/skills-by-yigitkonur-secondary --skill build-tinacms-nextjs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps you build and maintain TinaCMS-powered Next.js App Router sites with MDX/git-backed content and editor-driven deployment workflows.

Core Features & Use Cases

  • Detects TinaCMS in the repo and guides lane selection (TinaCloud vs self-hosted) for App Router projects.
  • Walks through configuring tina/config.ts, modeling content via the schema, and enabling visual editing and editorial preview.
  • Provides end-to-end wiring for server/client rendering patterns, static/draft modes, and deployment hooks.

Quick Start

Install TinaCMS and scaffold App Router integration to get an editable, Git-backed content workflow up and running.

Frequently Asked Questions about build-tinacms-nextjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add TinaCMS visual editing to a Next.js App Router project?

To add TinaCMS visual editing to a Next.js App Router project, you need to configure `tina/config.ts`, model your content schema, and wire server/client rendering patterns. This enables an editable, Git-backed content workflow with editorial preview capabilities.

What is the best way to manage git-backed MDX content with TinaCMS in Next.js?

Managing git-backed MDX content with TinaCMS involves defining your content models in the schema and using the `tinacms build` command. This approach ensures a scalable, maintainable CMS workflow where content changes are tracked directly in your repository.

Should I use TinaCloud or self-host TinaCMS for my Next.js site?

Choosing between TinaCloud and a self-hosted TinaCMS setup depends on your project requirements. The skill guides you through analyzing your repository to select the appropriate lane, balancing managed infrastructure convenience against custom self-hosted control.

Can I use TinaCMS editorial workflow with Next.js App Router static and draft modes?

Yes, TinaCMS supports editorial workflows with Next.js App Router static and draft modes. You must properly wire server/client rendering patterns and deployment hooks to enable visual editing and editorial preview functionalities effectively.

Why does my TinaCMS Next.js project require a specific config.ts setup?

A proper `tina/config.ts` setup is required to enforce a scalable and maintainable CMS workflow. It ensures the App Router patterns are correctly integrated with the TinaCMS schema, enabling reliable visual editing and Git-backed content management.

Does TinaCMS work with Next.js server and client rendering patterns?

Yes, TinaCMS works with Next.js server and client rendering patterns. The integration provides end-to-end wiring for these patterns alongside static and draft modes, ensuring the admin, data, and rendering layers function correctly within the App Router.