Loving Tina? ⭐️ us on GitHubStar

Docs

Learn

v.Latest
Introduction
Core Concepts
Querying Content
Editing
Customizing Tina
Going To Production
Media
Drafts
Guides
Further Reference

Now we're ready to start adding in Tina!

  1. From your project directory, install Tina by running npx @tinacms/cli@latest init.
  2. Select NextJS as the framework.
  3. Choose NPM as your package manager.
  4. "Yes" to TypeScript.
  5. Grab a coffee while TinaCMS is added to your website ☕.
  6. 🪟 Windows only – update your dev script in package.json file to "tinacms dev -c \"next dev\"".
  7. Run npm run dev to start your new Tinafied NextJS app!
  8. 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.

Last Edited: March 21, 2025