We need to wrap every page in the <TinaProvider> component. This component will provide the CMS to all of our pages, allowing us to create an editor for our content. We can do this in Next.js by creating a custom App component. Next will then use our custom app component to render the page.

Our blog starter already has this file created. Open up pages/_app.js and you should see something like this:

import '../styles/index.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Installation

From here, install tinacms. We also need to install styled-components, as it's a peer dependency:

yarn add tinacms styled-components

Adding the Provider

Wrapping the main App component in the withTina higher-order component will automatically instantiate the CMS and set up the provider.

import '../styles/index.css'
import { withTina } from 'tinacms'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default withTina(MyApp)

You can configure the CMS by passing a second argument into withTina. Refer to setting up the CMS object for details.

More Info

• NextJS.org: Custom App Component
• Tina Docs: Setting up the CMS Object