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. We also need to pass enabled and sidebar options to enable CMS editing and sidebar for editing the page.

pages/_app.js

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

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

export default withTina(MyApp, {
  enabled: true,
  sidebar: true,
})

The second argument of withTina configures the CMS. Refer to setting up the CMS object for details.

More Info

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

Last Edited: August 11, 2020