{"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/front-end-setup.md","data":{"frontmatter":{"title":"Front-end Setup"},"excerpt":" We're going to be using the Next.js blog starter as the base of our project. By default, it pulls all its data from the filesystem, but we'll want to make some changes to have it pull data from&hellip;","markdownBody":"\nWe're going to be using the Next.js blog starter as the base of our project. By default, it pulls all its data from the filesystem, but we'll want to make some changes to have it pull data from Strapi's GraphQL API.\n\nWe want to _keep Strapi running_ throughout this entire process. So, open a new terminal and create a new project alongside Strapi using the following command:\n\n```bash\nyarn create next-app -e blog-starter tina-strapi-blog\n```\n\nNavigate into the new directory and start up the website's dev server.\n\n```bash\ncd tina-strapi-blog\nyarn dev\n```\n\nNavigate to [http://localhost:3000](http://localhost:3000) and see what we'll be working with.\n\nThe blog is made up of two main pieces: an index page, and the blog post pages. Our goal will be to have the data on both of these pages come from Strapi, instead of from the filesystem.\n\n## Setup Environment Variable\n\nOur front-end has to know how to reach Strapi, so we'll set up an environment variable that will allow us to configure this. First, install `dotenv`\n\n```bash\nyarn add dotenv\n```\n\nThen in the root of the project create a file called `.env` and fill in the Strapi URL.\n\n**.env**\n\n```.env\nSTRAPI_URL=http://localhost:1337\n```\n\nAlso at the root of the project create a new file called `next.config.js` and populate it with\n\n**next.config.js**\n\n```js\nrequire('dotenv').config()\n\nmodule.exports = {\n  env: {\n    STRAPI_URL: process.env.STRAPI_URL,\n  },\n}\n```\n\nWhenver we start up our front-end project, this URL will be loaded into our environment and we'll have access to Strapi's location wherever we end up needing it.\n\n## Add Tina\n\nLet's start getting Tina in place to let us use our editing experience a bit down the road. We'll install Tina, its `styled-components`, and a library that will help us work with Strapi.\n\n```bash\nyarn add tinacms styled-components react-tinacms-strapi\n```\n\n### Add the Provider\n\nIn `pages/_app.js`, we're going to configure our site to have access to Tina and Strapi functionality on every page.\n\n**pages/\\_app.js**\n\n```js\nimport '../styles/index.css'\n\nimport {\n  StrapiMediaStore,\n  StrapiProvider,\n  StrapiClient,\n} from 'react-tinacms-strapi'\nimport { TinaCMS, TinaProvider } from 'tinacms'\n\nimport { useMemo } from 'react'\n\nexport default function MyApp({ Component, pageProps }) {\n  const cms = useMemo(\n    () =>\n      new TinaCMS({\n        toolbar: true,\n        enabled: true,\n        apis: {\n          strapi: new StrapiClient(process.env.STRAPI_URL),\n        },\n        media: {\n          store: new StrapiMediaStore(process.env.STRAPI_URL),\n        },\n      }),\n    []\n  )\n  return (\n    <TinaProvider cms={cms}>\n      <StrapiProvider\n        onLogin={() => {\n          /* we'll come back to this */\n        }}\n        onLogout={() => {\n          /* we'll come back to this */\n        }}\n      >\n        <Component {...pageProps} />\n      </StrapiProvider>\n    </TinaProvider>\n  )\n}\n```\n\nIf you refresh [your site](http://localhost:3000), you shouldn't see any changes. But we've made good progress under the hood.\n\nFirst off, we instantiated the CMS object, which is the heart-and-soul of Tina. We've configured it to show only the [toolbar](https://tinacms.org/docs/cms/ui#toolbar-configuration) and hide the sidebar. We've also passed it a `StrapiClient` that is responsible for communicating with our Strapi server. Additionally, we've added a `StrapiMediaStore`, which will allow us to upload images to Strapi.\n\nWe're wrapping our pages with a `TinaProvider` and a `StrapiProvider` so that all of our pages can interact with Tina and Strapi respectively. We'll figure out what we want to happen `onLogin` and `onLogout` in just a little bit.\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":"- [Setup Environment Variable](#setup-environment-variable)\n- [Add Tina](#add-tina)\n  * [Add the Provider](#add-the-provider)"},"__N_SSG":true}