This guide will show you how to set up Git-based content editing with Tina & Next.js. With a Git-based approach, changes made to content in Tina's editor are immediately written back to their local Markdown or JSON source files. Updated content files can then by 'saved' via commit and pushed to an origin Git repository.

Building off the Adding Tina to a Next.js Site guide, this guide assumes you have a basic understanding of Tina's fundamental building blocks. Below is a recap of the initial steps needed to set Tina up on a Next.js site.

Prerequisite Steps:

1. Install the Tina packages.

yarn add tinacms styled-components

2. Configure a custom _app file.

See here for information about custom _apps.

Feel free to reference the example in the previous guide using the withTina HOC. Or checkout the example below where the cms & TinaProvider are manually added.

pages/_app.js

import React from 'react'
import App from 'next/app'
import { TinaProvider, TinaCMS } from 'tinacms'

class MyApp extends App {
  constructor() {
    super()

    // Instantiate the cms
    this.cms = new TinaCMS({ enabled: true, sidebar: true })
  }
  render() {
    const { Component, pageProps } = this.props

    // Wrap the TinaProvider around all page components
    return (
      <TinaProvider cms={this.cms}>
        <Component {...pageProps} />
      </TinaProvider>
    )
  }
}

export default MyApp

Next, we'll set up a backend to persist content changes.

Last Edited: August 18, 2020