Overview

aSaaSin uses TinaCMS to manage Pages, Blog posts, Docs, and rich section-based content saved as Markdown/MDX. Tina generates a typed GraphQL client we use to fetch content and drive routes.

Edit mode

Open the editor at /admin - for local dev that’s http://localhost:3000/admin. Sign in and use the sidebar to create and edit Pages, Blog posts, and Docs.

Folder structure

tina/
├─ __generated__/  # GraphQL client + types (auto-generated)
├─ collections/    # Content collections (schema per type)
├─ fields/         # Reusable field definitions (e.g., SEO)
├─ options/        # Shared option lists/enums
├─ templates/      # Reusable section/block templates
├─ config.ts       # Tina root config
└─ tina-lock.json

Images used in content should live in /public or use absolute URLs.

Content types

  • Pages - marketing and static pages.
  • Blog posts - articles under /blog/*.
  • Docs - documentation under /docs/*.
  • Landing - section-based pages built from templates (hero, grids, info blocks, etc.).
  • All types include the shared SEO object from fields/seoField.ts.

Start Tina locally

Run yarn dev. A single command starts both the Next.js dev server and the local TinaCMS UI simultaneously:

yarn dev
# Runs: TINA_PUBLIC_IS_LOCAL=true tinacms dev -c "next dev --turbopack"

The Tina editor is available at http://localhost:3000/admin. In local mode, no Tina Cloud credentials are required — content is read directly from disk.

Docs: Getting started · CLI overview · Dev command

Section templates

Templates in tina/templates/* let authors compose pages from reusable, pre-styled sections (hero, feature grid, code block, info block, etc.). Each template defines its own fields and is rendered by your page components.

Most landing templates include an animation field (SectionAnimation enum) — set it to none, fade, slideUp, slideLeft, slideRight, or zoom to apply an entrance animation when the section scrolls into view. See Entrance Animations for usage details.

In production, TinaCMS Cloud supports live preview — changes in the editor are reflected in the page preview in real time before saving.

Integration points

  • Routing - Next.js dynamic routes (e.g., /blog/[slug]) load content by slug.
  • SEO - generateSeoMetadata() converts Tina SEO fields to Next.js Metadata.
  • Sitemap - services query Tina connections to build URLs for pages, posts, and docs.
  • Landing pages - render sections defined by tina/templates/*.

Local tips

  • Commit content changes like code-no external DB required.
  • Keep NEXT_PUBLIC_APP_URL current for canonical links and images in SEO.
  • Store large assets in /public and reference them with relative paths.

Troubleshooting

  • Types missing or stale? Restart yarn dev.
  • CMS not loading? Ensure yarn dev runs with tinacms dev -c "next dev --turbopack" — do not run next dev directly.
  • New fields not visible? Confirm collection path and field names match your files.