Overview

Product Tour

Using a starter

Adding Tina to existing NextJS site

Getting Started

Using the Tina editor

The JavaScript toolkit for building content management interfaces

Content Modeling

Data Fetching

Contextual Editing

Running the Local GraphQL API

Getting a Single Document

Filtering

Sorting

Paginating

Performance

Limitations

Querying a Collection

Updating a Document

Adding a Document

Querying the API

Autogenerated GraphQL Client

Read Only Tokens

Markdown

Rich Text with MDX

Block-based editing

Active Field Indicator

Editing

Validation

Custom field components

Custom List Rendering

Format and parse input

Customizing a form

Manually editing and accessing Tina's edit state

Extending a field plugin

Creating a custom field component

Advanced field customization

Customizing Tina's UI

Extending Tina

Powerful Git-based content management for teams

Registration

Projects

Users

Tina Cloud Dashboard

Connecting the site

API Versioning

Branching

Data Layer

Adding Internationalization to Tina

Non-React-based SSG support

string

number

datetime

boolean

image

reference

object

rich-text

Content Types

".tina" folder

@tinacms/cli

next-tinacms-cloudinary

The CMS

Forms

Text

Text Area

Number

Image

Color

Toggle

Radio Group

Select

List

Group

Group List

Blocks

Date & Time

HTML

Field Plugins

@tinacms/toolkit

Adding Tina to an existing NextJS site


> Note: This doc assumes that you have a working NextJS site. If not, you can quickly get started using one of our [starters](/docs/introduction/using-starter/).

## Adding Tina

We created a quick way to bootstrap a Tina application to show the power of visual editing; from your terminal, enter the following command:

```bash,copy
npx @tinacms/cli@latest init
```

This command does a few things in your Next.js application:

1. Installs all required dependencies for Tina.
2. Defines a basic content schema in the `.tina` directory.
3. Adds some Tina boilerplate components.
4. Creates example content in the demo directory.
5. Edit the `package.json` to have the `dev`, `build`, and `start` scripts run the tina GraphQL API.

Now that Tina has been installed in your site, you will need to add the Tina Provider to your site's layout.

In your `_app.jsx` file, you will want to wrap your layout with the TinaProvider
from `.tina/components/TinaDynamicProvider.js`

```diff
+ import TinaProvider from ../.tina/components/TinaDynamicProvider.js

// ...

return (
+  <TinaProvider>
     <Component {...pageProps} />
+  </TinaProvider>
)

```

### A quick test

Now that we have a basic Tina setup, you can launch your application using the following commmand:

```bash,copy
yarn dev
```

When Tina is initialized on a NextJS site, a "/admin" page is created to allow editors to log in and begin to make content changes.

Now, if you navigate to http://localhost:3000/admin (assuming your site runs on port 3000), you should see a new CMS landing page has been added to your site!

![Tina Login Page](/img/tina-login.png)

Next we'll show you how to use the CMS and start editing some content!


Using the Tina Editor

Docs

Adding Tina to an existing NextJS site

Using the Tina Editor