Now we've got our amazing "Hello world" content in Tina, we need to display it in our website!

There are several ways we can get the content rendered on screen. For now, we will go with client-side data fetching which means the page will query Tina for the content directly from the browser when the user visits the page. There are alternative ways, such as SSR and SSG, that we will explore later.

1. Go to the Page.tsx file

2. Add the following code:

"use client";
// needed because NextJS is SSR by default, and we want to do client-side rendering for now.
import { useState, useEffect } from "react";
import { client } from "../tina/__generated__/client";
// this will be used to query our Tina CMS to get our awesome title
// you may need to update the relative import depending on your setup


export default function Home() {
  const [amazingTitle, setAmazingTitle] = useState("");

  useEffect(() => {
    const fetchContent = async () => {
      const result = await client.queries.my_first_collection({
        relativePath: "Hello-World.md",
      });
      setAmazingTitle(result.data.my_first_collection.title);
    };

    fetchContent();
  }, []);
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>
  );
}

There's a bit going on here, so let's take a look at the fetchContent method in more detail...

The first, and most important thing, is we are using Tina's client, which is our gateway into the Tina CMS content. You can read more about the client but for now, just think of it as a base "API service" that we use whenever we want to retrieve data from Tina.

We are then using client.queries, which gives us access to all the collections we defined in our Tina schema. Right now, we have 1 collection - my_first_collection - and Tina gives us strongly-typed access to those collections. That's pretty neat!

These strongly-typed extension methods are auto-generated by Tina when the tinacms build command is run. This command is included by default, when you run npm run dev, but it's good to know because you may wonder why a new collection doesn't immediately appear on the client.queries object if you aren't already running the app.

Remember, a collection can hold many records. Right now we just have 1 - the Hello-World.md file that was created in the previous step.

So we will specify that file as the content we want returned.

3. Replace your hard-coded <h1>Hello World!</h1> content with our amazing Tina-powered content!

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>{amazingTitle}</h1>
      </main>
    </div>
  );

4. Start up your app and behold your amazing title being powered by Tina 🥳