Docs
Learn
The result of the defineConfig function when exported from tina/config.{ts,tsx,js,jsx} defines your TinaCMS setup.
Note that it must be the default export.
The location for the config file was previously at.tina/config.{ts,tsx,js,jsx}
Options
Defines your content model.
The base branch to pull content from. Required for TinaCloud.
TheclientId from TinaCloud. Required for TinaCloud.
Your read only token from TinaCloud. Required for TinaCloud.
The relative path of a seperate content repo in local development.
Set-up for custom authentication.
Override the default content API URL.
All properties marked as REQUIRED must be specified for the field to work properly.
Examples
Vercel and TinaCloud Configuration
This is a standard configuration using TinaCloud to host your datalayer, and the built-in Tina media and search capabilities.
const branch =process.env.NEXT_PUBLIC_TINA_BRANCH ||process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF ||process.env.HEAD ||'main';export default defineConfig({branch,// generated by TinaCloudtoken: '<Your Read Only Token>',// generated by TinaCloudclientId: '<Your Client ID>',build: {publicFolder: 'public',outputFolder: 'admin',},schema: {//Content model definition here...},ui: {previewUrl: (context) => {// Use Vercel preview deployments based on branch namesreturn { url: `https://my-app-git-${context.branch}.vercel.app` };},},media: {tina: {publicFolder: 'public',mediaRoot: 'uploads',},},search: {tina: {indexerToken: process.env.TINA_SEARCH_TOKEN,},},});
Cloudinary Media Store
Tina supports both Git-backed media and specific external media providers:
export default defineConfig({// ... other config optionsmedia: {loadCustomStore: async () => {const pack = await import('next-tinacms-cloudinary');return pack.TinaCloudCloudinaryMediaStore;},accept: 'image/*',},});
TinaCloud Search Options
Tina provides built-in search capabilities through TinaCloud.
// Tina Cloud searchexport default defineConfig({// ... other config optionssearch: {tina: {indexerToken: process.env.TINA_SEARCH_TOKEN,stopwordLanguages: ['eng', 'fra'],tokenSplitRegex: '/[p{L}d_]+/',},},});
Imports with Typescript Path Aliases
TinaCMS supports TypeScript path aliases in the tina/config.{ts,js,tsx} file and collections.
Ensure that tsconfig.json exists at the root of your project. Define your aliases in the compilerOptions section.
//tsconfig.json{"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["src/*"]}}}
You can now import utilities or other modules using the aliases.
import { someUtility } from '@/lib/utils';export default defineConfig({//...});