Skip to content
A simple starter blog built with Next.js & TinaCMS
Branch: master
Clone or download
Latest commit fdd3424 Feb 12, 2020
Type Name Latest commit message Commit time
Failed to load latest commit information.
src fix: updates useCMSForm --> useLocalForm Dec 6, 2019
.gitignore chore: add .DS_Store to .gitignore Feb 12, 2020 Update Dec 6, 2019
next.config.js removes css modules from webpack config Nov 13, 2019
package.json other: updates scripts Dec 6, 2019
server.js fix: adds subdir to server Dec 6, 2019
yarn.lock updates Tina & Next Dec 6, 2019


Note: As of 12.06.19, the backend is now a custom Express server, as opposed to the tina -git-server. Read more here on those changes.


Netlify Status

Brevifolia is minimalist blog starter to get you going using TinaCMS with Next.js. Check out the demo here. A live version of the Tina demo in the cloud is coming soooon 😊. Checkout the Gatsby version here.

This blog is statically generated by Next.js, a rendered combination of react components and markdown / json files. It is preconfigured to work with TinaCMS as a way to manage your content. Tina makes changes by editing markdown or json files, uploading media to the correct directory and committing these updates to your repo directly.

The styles were coded & designed by yours truly, using styled-jsx (which is inherently supported by Next.js). The font used is Work Sans.

The structure of this blog with TinaCMS is based on the documentation, since Next.js is such a flexible framework, there's lots of ways you could approach using Tina with it. Checkout the documentation for some insight on how this site was setup with Tina + Next.

Quick Setup

Set-up Locally

In your terminal, navigate to where you would like this blog to live, then run

#clone the repo
git clone

#navigate to the directory
cd brevifolia-next-tinacms

#install dependencies & run dev server with yarn 
yarn install
yarn develop

#or with npm 
npm install
npm run develop

This will start a dev server, navigate to localhost:3000. Note that the script dev doesn't start the git server which you need running to use Tina locally. Use develop whenever trying to make edits with Tina.

Project Structure

  • Site-level configuration is stored in data/config.json. This is editable by Tina when you are on the home page.
  • Edit styles within each component or page file within the <style jsx> tags.
  • Global styles live in the Meta component.
  • src/posts/contains all your markdown blog posts.
  • src/static/ is where you images live and will get uploaded.
  • src/pages is where you page components live.
  • The blog pages are dynamically generated with a slug parameter. See the template in src/pages/blog/[slug].js.
  • The pages & template are comprised of components from src/components.
  • The routes are generated in next.config.js with exportPathMap

Using Tina as your CMS 🦙

Tina is an open-source site editing toolkit for React-based frameworks — Gatsby & Next.js. It's a lightweight but powerful toolkit for creating a content editing interface with JavaScript components. Tina allows you to create an intuitive UI for real-time content editing, built directly into your site. To learn more about using Tina with this starter, head over to the Tina docs. To get started editing with Tina, get the project up and running locally, open up the UI and navigate around to see what you can edit!

Deploy Options

Deploy to Netlify

Netlify is a great way to easily deploy sites.

You can’t perform that action at this time.