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

Let's prepare our project for integration with TinaCMS.

This is only to keep things simple moving forward.

  1. Open up the project in your preferred IDE.
  2. Delete the content from your NextJS Page.tsx file.
  3. Add a "Hello world" header!

You should end up with:

export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<h1>Hello World!</h1>
</main>
</div>
);
}
Last Edited: March 19, 2025