We are going to be using the Next.js Blog Starter for this guide, so from your terminal run the following:
npx create-next-app --example blog-starter tina-quickstart cd tina-quickstart
We created a quick way to bootstrap a Tina application to show the power of visual editing, from your terminal enter the following command:
npx @tinacms/cli@latest init
This command does a few things in your Next.js application:
package.jsonto add scripts to launch tina (tina-dev, tina-build, tina-start)
Now that we have a basic Tina setup you can launch your application using the following commmand:
Once you have launch the application you have a couple of new URLS:
The first URL brings you to a demo of TinaCMS, it will show you the power of Tina and also give you some informational links you check out. If you navigate to http://localhost:3000/demo/blog/HelloWorld, you won't be able to edit right away. Firstly you need to enter edit mode, to enter edit mode, navigate to http://localhost:3000/admin you will enter into edit mode. Selecting the pencil in the bottom left allows you to edit the title and the body of the page right in the frontend. When you hit save, that will save your changes to the Markdown file.
Want to see your changes? Open up the file located at
/content/HelloWorld.mdand the changes you've made will be there!
This works by using our Content API which will go into greater depth during this guide.
The second URL http://localhost:4001/altair/ will launch to a graphQL client that will allow you to interact and create queries which we will do in this guide.#
Last Edited: August 13, 2021