/tina-cloud-starter

Next.js starter for TinaCMS: live edit your website visually 🪄

Primary LanguageTypeScriptApache License 2.0Apache-2.0

Tina Starter 🦙

tina-cloud-starter-demo

This Next.js starter is powered by TinaCMS for you and your team to visually live edit the structured content of your website. ✨

The content is managed through Markdown and JSON files stored in your GitHub repository, and queried through Tina GraphQL API.

Features

  • Tina Headless CMS for authentication, content modeling, visual editing and team management.
  • Vercel deployment to visually edit your site from the /admin route.
  • Local development workflow from the filesystem with a local GraqhQL server.

Requirements

Local Development

Install the project's dependencies:

Note

Do you know the best package manager for Node.js? Using the right package manager can greatly enhance your development workflow. We recommend using pnpm for its speed and efficient handling of dependencies. Learn more about why pnpm might be the best choice for your projects by checking out this rule from SSW.

pnpm install

Run the project locally:

pnpm dev

Local URLs

Building the Starter Locally (Using the hosted content API)

Replace the .env.example, with .env

NEXT_PUBLIC_TINA_CLIENT_ID=<get this from the project you create at app.tina.io>
TINA_TOKEN=<get this from the project you create at app.tina.io>
NEXT_PUBLIC_TINA_BRANCH=<Specify the branch with Tina configured>

Build the project:

pnpm build

Getting Help

To get help with any TinaCMS challenges you may have:

Development tips

Visual Studio Code GraphQL extension

Install the GraphQL extension to benefit from type auto-completion.

Typescript

A good way to ensure your components match the shape of your data is to leverage the auto-generated TypeScript types. These are rebuilt when your tina config changes.

LICENSE

Licensed under the Apache 2.0 license.