Install TinaCMS 🦙

We have specialised Starter Kits to get up and running even more quickly, but here we'll go over adding the CMS to an existing project.

Now we're ready to start adding in Tina!

Install TinaCMS

From your project directory, install Tina by running…

npx @tinacms/cli@latest init

1. Select NextJS as the framework.
2. Choose NPM as your package manager.
3. "Yes" to TypeScript.

Grab a coffee while TinaCMS is added to your website ☕.

🪟 Windows only – update your dev script in package.json file to "tinacms dev -c \"next dev\"".

Test the Application

1. Run npm run dev to start your new Tinafied NextJS app!
2. Access your new Tina editor by going to http://localhost:3000/admin/index.html

DELETE the src/pages/ directory, this is generated to ensure compatibility with older versions.

Since you just set up TinaCMS, you might notice there's no content to edit yet. This is because Tina needs knowledge of a model to determines what data your pages need! We'll add that in the next step.