Tina Docs

Table of Contents

Introduction
Advantages of Tina

Dynamic Routing with [slug].tsx

Use your json formatted files to create pages with TinaCMS

1. Relevant Imports

This introductory step is just importing a series of Tina related methods, like useTina and client. As well as relevant helper methods.

2. Data Fetching

Using the Next.js method for fetching data at build time. Specifically using the Tina generated `client.queries` function to grab the relevant gql query. Returning it in a format the useTina hook can read.

3. Static Path Defining

Grabs all the .json files and maps each corresponding slug (based on file name) to serve as the URL parameter of each page.

4. Populate useTina Hook

Our custom useTina hook is used to fetch and manage the TinaCMS data for live and contextual editing.

5. Rendering <BlocksPage />

Another component used to actually render the data based on the structure type that the data comes in from

Introduction

Tina is an open-source, Git-backed headless content management system (CMS) that empowers both developers and content creators to collaborate seamlessly on a single platform. Tina enables developers to craft a custom visual editing experience perfectly tailored to their website or application while supporting a broad range of content types such as Markdown, MDX, and JSON.

Advantages of Tina

Git-based content management

Tina uses Git to provide a single source of truth for content and code, enhancing collaboration between developers and content editors.
Content changes are committed directly to your repository, ensuring version control and content history.

Real-time visual editing

Create and edit content directly in the context of your website or application with Tina's real-time visual editor.
Customizable content blocks allow content editors to assemble pages and manage content intuitively, similar to using a site builder.
The changes made by the editors can be previewed in real-time before publishing, ensuring the quality of the content.

Control over content

Tina's open-source model gives you complete control and ownership over your content.
Tina's (optional) self-hosted backend gives you piece of mind from vendor lock-in.

Scalability

Performance at Scale: Tina is designed for large-scale projects. Whether your site has hundreds or tens of thousands of pages, Tina ensures optimal performance.
Powerful Query Capabilities: With Tina's unique data layer, your Markdown content becomes as flexible and queryable as if it were in a database.

Last Edited: November 3, 2024