Tina is a toolkit for building visual editing into your site. This guide will walk you through setting up Tina in a Next.js environment.
TinaCMS provides an end-to-end solution for creating a live editing experience on a Next.js site. We favour the use of Next.js but Tina aims to work with a variety of project setups and content strategies. However, we suggest following a few principles to ensure success when working with Tina.
This doesn't mean that you can only perform content transformation on the client side; in fact, best practices dictate that you should generate the HTML of your content server-side or during a build step. Fortunately, Next.js' hybrid approach makes this relatively easy.
The kinds of projects that will struggle to work well with Tina are those which perform content transformation exclusively at build time, such as through a Webpack plugin.
Next.js 9.3 introduces next-gen data fetching methods getStaticProps, getStaticPaths, and getServerSideProps. Our Next.js documentation will center around workflows using these methods.
Tina makes extensive use of React Hooks, which can only be used inside of function components. Our documentation will opt for expressing components as function components instead of class components in most cases.
If at any point you feel lost or confused during this tutorial, checkout the Tina Community Forum to get answers, help, and llama-humor.