The Preview Mode offered by Next.js allows us to load a separate set of data depending on the "edit" (or "preview") mode. With the help of the GitHub API, we can allow anyone to fork your site, make changes, and create a pull request from the Tina UI.
Feel free to reference this demo repository. The commits roughly correlate with specific steps outlined in this guide.
Open up your terminal. Navigate to where you'd like this project to live and run:
yarn create next-app
Name your project, then choose the 'Default Starter' from the terminal options. Go ahead and navigate into that project and start the development server.
cd your-project-name yarn dev
Navigate to http://localhost:3000/ and you should see something like the image above. Now you can commit and push this
create-next-app to your new GitHub repository.
Note: This guide assumes you are following along with a fresh create-next-app. However, if you're configuring your own project, you will want to make sure your project conforms to the following requirements:
- Uses Next.js >= 9.3
- Is stored in a public GitHub repository
- Is hosted with Vercel or another platform that can handle Preview Mode (in other words, not a static host.)
The examples in this guide will use Typescript. To set up your
create-next-app with Typescript, run this in the terminal:
yarn add --dev typescript @types/node @types/react
The next time you start the development server, Next.js will automatically create a
tsconfig.json file and populate it with default options. You may also want to change your
Now that our
create-next-app is set up, we can add a few Tina packages:
yarn add react-tinacms-github next-tinacms-github tinacms styled-components
react-tinacms-github package provides helpers for setting up TinaCMS to use the GitHub API, with GitHub authentication. And the
next-tinacms-github package provides helpers for managing the GitHub auth token and loading content from the GitHub API.