Loving Tina? ⭐️ us on GitHubStar

Docs

Learn

v.Latest
Introduction
Core Concepts
Querying Content
Editing
Customizing Tina
Going To Production
Media
Drafts
Guides
Further Reference

What is TinaCMS?

TinaCMS is a headless CMS (content management system).

Basically, it's a way to manage content separately from website code.

Headless means that it exposes a content API for your code to use, allowing it to stay completely separated from your website – but it also has tools to tailor the editing experience such as Visual Editing (live, side-by-side editing).

Think of TinaCMS more like a tool to build a custom CMS experience, rather than your typical restricted CMS tooling.

First Steps...

  1. Install Node.js (check the NextJS website for the required version)
  2. Run npx create-next-app@latest
  3. Change directories to your app's directory
  4. Run npm run dev to see your NextJS app!

Why NextJS?

NextJS is an industry leader React framework that makes it easy to build fast, scalable websites.

We love using NextJS for our TinaCMS projects.

  • Hybrid rendering – Supports both static generation and server-side rendering.
  • Performance – Automatic code splitting, image optimization, and caching.
  • SEO-friendly – Pre-rendered pages help search engines index content.

Next.js works well with TinaCMS, making it easy to edit content while keeping your site fast and modern.

If you're new to NextJS or front-end web development, we recommend having a look at their beginner tutorials.

Last Edited: March 18, 2025