Next.js - Just and only Function based, even _app.jsx

Hello guys! I wonder if there is any example for just and only function based tinaCMS installation? When i open tinaCMS first page they have a nice image there with _app.js using just and only functionbased component and hooks for ex. withTina(). Thats what i want to do, but when i check the DOCS for integrating with Next.js i find only a classbased example for _app.tsx… If u guys have a good example to share with plz can u? P.S. What i want u to focus most on is that future in _app.tsx where its rendering based on if user is logged in or not into the github. How to get it done with .withTina() ? Thanks!

Hey @JanisBasisBasovs! Thanks for posting this. You bring up a good point that most of our reference repositories use a class-based custom _app. Feel free to read some of these articles on converting a class component to a functional one:

An example could look something like this:

import { TinaProvider, TinaCMS } from 'tinacms'
import { GitClient } from '@tinacms/git-client'

const App = ({ Component, pageProps }) => {
  const cms = new TinaCMS({
    enabled: process.env.NODE_ENV !== 'production',
    sidebar: false,
    toolbar: true,
    apis: {
      git: new GitClient('http://localhost:3030/___tina'), // this could be the GitHub client
    },
  })

  return (
      <TinaProvider cms={cms}>
          <Component {...pageProps} />
      </TinaProvider>
  )
}

export default App

To your second question, if you’re wanting to customize app behavior based on whether the user is logged in you might not want to use the withTina HOC and just instantiate Tina manually (as you see in the example above) and handle the rendering logic based on the state of the GitHub client.