Render Your Content

Now we've got our amazing "Hello world" content in TinaCMS, 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 TinaCMS 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.

Update your Homepage Code

Go to app/page.tsx and add the following code:

What does this Code do?

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 TinaCMS's client, which is our gateway into the TinaCMS 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 TinaCMS.

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

These strongly-typed extension methods are auto-generated by TinaCMS 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.

Show your Data

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.

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

1. Start up your app and behold your amazing title being powered by TinaCMS 🥳