<RecipeBlock
  title="Dynamic Routing with [slug].tsx"
  description="Use your json formatted files to create pages with TinaCMS"
  codeblock={<>
    ```javascript
    import { client } from '../tina/__generated__/client'
    import { GetStaticProps, GetStaticPaths } from 'next'
    import { fileToUrl } from 'utils/urls'
    import { useTina } from 'tinacms/dist/react'
    import { BlocksPage } from 'components/blocks/BlocksPage'
    
    const fg = require('fast-glob')
    
    const Page = props => {
    const tinaData = useTina({
    query: props.query,
    data: props.data,
    variables: props.vars,
    })
    const data = tinaData.data.page
    
    return <BlocksPage data={data} recentPosts={tinaData.data.recentPosts} />
    }
    
    export const getStaticProps: GetStaticProps = async function ({
    preview,
    previewData,
    ...ctx
    }) {
    const slug = ctx.params?.slug || 'home'
    const vars = { relativePath: slug + '.json' }
    
    const res = await client.queries.pageWithRecentPosts({ relativePath: slug + '.json' })
    
    return {
    props: {
    query: res.query,
    data: res.data,
    vars,
    },
    }
    }
    
    export const getStaticPaths: GetStaticPaths = async function () {
    const pages = await fg(`./content/blocksPages/*.json`)
    const paths = pages.map(file => {
    const slug = fileToUrl(file, 'blocksPages')
    return { params: { slug } }
    })
    return {
    paths: paths,
    fallback: false,
    }
    }
    
    export default Page
    
    ```
  </>}
  instruction={[
    {
      header: "Relevant Imports",
      itemDescription:
        "This introductory step is just importing a series of Tina related methods, like useTina and client. As well as relevant helper methods.",
      codeLineStart: 1,
      codeLineEnd: 5
    },
    {
      header: "Data Fetching",
      itemDescription:
        "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.",
      codeLineStart: 28,
      codeLineEnd: 37
    },
    {
      header: "Static Path Defining",
      itemDescription:
        "Grabs all the .json files and maps each corresponding slug (based on file name) to serve as the URL parameter of each page.",
      codeLineStart: 40,
      codeLineEnd: 44
    },
    {
      header: "Populate useTina Hook",
      itemDescription:
        "Our custom useTina hook is used to fetch and manage the TinaCMS data for live and contextual editing.",
      codeLineStart: 10,
      codeLineEnd: 15
    },
    {
      header: "Rendering <BlocksPage />",
      itemDescription:
        "Another component used to actually render the data based on the structure type that the data comes in from.",
      codeLineStart: 17,
      codeLineEnd: 18
    }
  ]}
/>

## 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.

<Youtube embedSrc="https://www.youtube.com/embed/zRkeKSZjlyw" />

## 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 1, 2024