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}
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.
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,},},});
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/*',},});
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_]+/',},},});
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({//...});
© TinaCMS 2019–2025