{"pageProps":{"preview":false,"currentGuide":{"title":"Using Tina With Strapi","steps":[{"title":"Overview","id":"/guides/nextjs/tina-with-strapi/overview","slug":"/guides/nextjs/tina-with-strapi/overview","data":"./overview.md"},{"title":"Setting up Strapi","id":"/guides/nextjs/tina-with-strapi/strapi-setup","slug":"/guides/nextjs/tina-with-strapi/strapi-setup","data":"./strapi-setup.md"},{"title":"Front-end Setup","id":"/guides/nextjs/tina-with-strapi/front-end-setup","slug":"/guides/nextjs/tina-with-strapi/front-end-setup","data":"./front-end-setup.md"},{"title":"Querying Strapi","id":"/guides/nextjs/tina-with-strapi/querying-strapi","slug":"/guides/nextjs/tina-with-strapi/querying-strapi","data":"./querying-strapi.md"},{"title":"Authenticating with Strapi","id":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","slug":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","data":"./authenticating-with-strapi.md"},{"title":"Editing with Tina","id":"/guides/nextjs/tina-with-strapi/editing-with-tina","slug":"/guides/nextjs/tina-with-strapi/editing-with-tina","data":"./editing-with-tina.md"},{"title":"Saving to Strapi","id":"/guides/nextjs/tina-with-strapi/saving-to-strapi","slug":"/guides/nextjs/tina-with-strapi/saving-to-strapi","data":"./saving-to-strapi.md"}]},"guideMeta":{"fileRelativePath":"content/guides/nextjs/tina-with-strapi/meta.json","data":{"title":"Using Tina With Strapi","steps":[{"title":"Overview","id":"/guides/nextjs/tina-with-strapi/overview","slug":"/guides/nextjs/tina-with-strapi/overview","data":"./overview.md"},{"title":"Setting up Strapi","id":"/guides/nextjs/tina-with-strapi/strapi-setup","slug":"/guides/nextjs/tina-with-strapi/strapi-setup","data":"./strapi-setup.md"},{"title":"Front-end Setup","id":"/guides/nextjs/tina-with-strapi/front-end-setup","slug":"/guides/nextjs/tina-with-strapi/front-end-setup","data":"./front-end-setup.md"},{"title":"Querying Strapi","id":"/guides/nextjs/tina-with-strapi/querying-strapi","slug":"/guides/nextjs/tina-with-strapi/querying-strapi","data":"./querying-strapi.md"},{"title":"Authenticating with Strapi","id":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","slug":"/guides/nextjs/tina-with-strapi/authenticating-with-strapi","data":"./authenticating-with-strapi.md"},{"title":"Editing with Tina","id":"/guides/nextjs/tina-with-strapi/editing-with-tina","slug":"/guides/nextjs/tina-with-strapi/editing-with-tina","data":"./editing-with-tina.md"},{"title":"Saving to Strapi","id":"/guides/nextjs/tina-with-strapi/saving-to-strapi","slug":"/guides/nextjs/tina-with-strapi/saving-to-strapi","data":"./saving-to-strapi.md"}]}},"markdownFile":{"fileRelativePath":"content/guides/nextjs/tina-with-strapi/strapi-setup.md","data":{"frontmatter":{"title":"Setting up Strapi"},"excerpt":" We've chosen to work with Strapi for this example because it's open-source and pretty easy to use and customize. I would expect that much of what we cover will apply to other CMS's. Feel free to take…","markdownBody":"\nWe've chosen to work with Strapi for this example because it's open-source and pretty easy to use and customize. I would expect that much of what we cover will apply to other CMS's. Feel free to take a look at [Strapi's documentation](https://strapi.io/documentation/v3.x/getting-started/quick-start.html) to help you along.\n\n## Requirements\n\nIn order to run Strapi locally you need the following:\n\n| Software | Minimum Version |\n| -------- | --------------- |\n| Node.js  | 12.X            |\n| npm      | 6.X             |\n\nAdditionally we'll be using `yarn` throughout this guide. You can install it by following this [getting started guide](https://classic.yarnpkg.com/en/docs/getting-started).\n\n## Install Strapi Locally\n\nInstalling Strapi is simple, just run the following command.\n\n```bash\nyarn create strapi-app tina-strapi-server --quickstart\n```\n\nThat's it! You've just installed Strapi locally 🎉. A browser window has probably opened for you and is prompting you to create an administrator account. Before we do that, let's go ahead and make Strapi even easier to use by installing the GraphQL plugin. Hit `Ctrl+C` to shut down the server and then run the following command.\n\n```bash\ncd tina-strapi-server\nyarn strapi install graphql\n```\n\nNow you can restart the server and set up your local administrator account.\n\n```\nyarn develop\n```\n\n> Keep in mind that the administrator account you create now will only be used for Strapi management. We'll be setting up separate accounts later to get access to the Strapi APIs.\n\n## Create Some Content Types\n\nWe'll set up a simple blog with two content types: **Blog Posts** and **Authors**.\n\n### Set up the Author Type\n\nOur authors will be straightforward with only a `name` and a `picture` field.\n\nOpen up the Strapi management console at [http://localhost:1337](http://localhost:1337) and click on **Content-Types Builder** in the left-nav. Click **Create a new collection type** and enter **Author** as the display name. Note that Strapi will automatically generate an API friendly name for whatever you input here.\n\nNext, you'll be presented with all of the fields that you can add to your content type.\n\n![Strapi field types](/img/strapi-guide/field_types.png)\n\nThe two field types we'll use for an author are **Text** and **Media**.\n\nClick on **Text** and enter `name` as the field name. Click on the **Advanced Settings** tab and make this field required. Easy enough!\n\nNext, we'll click on **Add another field** and select the **Media** type. We're going to call this field `picture` and switch the type to **Single media**. Once again, move over to the **Advanced Settings** tab and change the allowed types of media to only allow images. Click on **Finish** and then click on **Save**. Strapi will quickly restart the server, and your content type will be ready to use.\n\n![Strapi field types](/img/strapi-guide/author_type.png)\n\n> I'm choosing field names to best match what the Next.js starter will provide us with in later steps. If you want to name them something different, keep in mind that you might need to make some extra changes on the front-end\n\n### Set up the Blog Post Type\n\nWe're going to structure our Blog Post type to match the following:\n\n| Field Name   | Type                    | Advanced Settings     |\n| ------------ | ----------------------- | --------------------- |\n| `title`      | Text (short)            | required, unique      |\n| `content`    | Text (long)             |                       |\n| `excerpt`    | Text (long)             |                       |\n| `coverImage` | Media (single)          | Allowed Media: Images |\n| `slug`       | UID (linked to `title`) | required, unique      |\n| `date`       | Date (date)             | required              |\n| `authors`    | Relation (many-to-one)  |                       |\n\nClick the **Content-type Builder** and **Create a new collection type**. We'll name this type **Blog Post**.\n\nLet's set up all the fields:\n\n1. Create a short-text field called `title`. Make it required and unique, since we'll have Strapi generate a slug based on this field.\n2. Create two long-text fields called `content` and `excerpt`.\n3. Create a new single-media field called `coverImage`. It should only accept image files.\n4. Create a new **UID** field and call it `slug`. Under **Attached field** choose `title`. Make this field required and unique. This field will automatically be populated from the post's `title`.\n5. Create a new **Date** field and name it `date`. We'll make this a date only type and make it required.\n6. Create a new **Relation** type and choose the relation that says \"Author has many Blog Posts.\" This will add a field to both content types, which could be useful in the future if we want to add the ability to see all the posts an author has written.\n\n![Linking author to blog post](/img/strapi-guide/blog_post_author.png)\n\nAfter you've created all these fields, don't forget to hit the **Save** button.\n\n## Create Sample Data\n\nAll that's left for our initial Strapi setup is to create some sample data.\n\nUnder the **Collection Types** section of the left-nav, click into Author and then **Add New Author**. This is all pretty self-explanatory, give your author a name and a _beautiful_ picture and then hit **Save**..\n\n![Example author](/img/strapi-guide/bmitton_author.png)\n\nNow create some sample blog posts. I'd recommend two or three, so we can better demonstrate some features on the front-end when we get there. I'd recommend using a fun [lorem-ipsum generator](https://loremipsum.io/ultimate-list-of-lorem-ipsum-generators/) as a placeholder for your blog content. Don't forget to link these posts to the author that you previously created.\n\n![Example blog post](/img/strapi-guide/a_blog_post.png)\n\n## Conclusion\n\nThat's the end of our general Strapi setup. We'll be coming back a few times to tweak some settings as the need arises. Let's get started setting up a front-end with Tina to use our shiny new Strapi back-end..\n"}},"allGuides":[{"weight":300,"id":"gatsby","title":"Gatsby","collapsible":false,"items":[{"id":"adding-tina","title":"Adding Tina to a Gatsby Site","slug":"/guides/gatsby/adding-tina/project-setup"},{"id":"git","title":"Using a Git Backend with Gatsby","slug":"/guides/gatsby/git/installation"}]},{"weight":100,"id":"general","title":"General","collapsible":false,"items":[{"id":"inline-blocks","title":"Working with Inline Blocks","slug":"/guides/general/inline-blocks/overview"}]},{"weight":200,"id":"nextjs","title":"Next.js","collapsible":false,"items":[{"id":"adding-tina","title":"Adding Tina to a Next.js Site","slug":"/guides/nextjs/adding-tina/overview"},{"id":"git","title":"Using a Git Backend with Next.js","slug":"/guides/nextjs/git/getting-started"},{"id":"github","title":"Using GitHub with Next.js","slug":"/guides/nextjs/github/initial-setup"},{"id":"tina-with-strapi","title":"Using Tina With Strapi","slug":"/guides/nextjs/tina-with-strapi/overview"}]}],"tocItems":"- [Requirements](#requirements)\n- [Install Strapi Locally](#install-strapi-locally)\n- [Create Some Content Types](#create-some-content-types)\n  * [Set up the Author Type](#set-up-the-author-type)\n  * [Set up the Blog Post Type](#set-up-the-blog-post-type)\n- [Create Sample Data](#create-sample-data)\n- [Conclusion](#conclusion)"},"__N_SSG":true}