Connect a headless CMS to a code template
Every code edition of a Framebrick template ships with its content inside the project: blog posts, projects, services, jobs and the other lists are plain files you edit in a code editor. A headless CMS moves those lists into an admin, so people who don’t touch code can publish — and the site’s pages, sections and components stay exactly as they are.
Do you need one?
Section titled “Do you need one?”- Yes, when someone other than the developer publishes — a marketing colleague adding posts, a recruiter opening a role — or when content changes every week.
- Probably not, when the site changes a few times a year. Editing the files is simpler, and there is nothing to host or pay for.
How each edition is ready for it
Section titled “How each edition is ready for it”| Edition | Where the lists come from | Connecting a CMS |
|---|---|---|
| Next.js | src/lib/content.ts — every page asks it for posts, projects, services… |
Rewrite that one file to read from the CMS — Next.js templates |
| Astro | Content collections in src/content.config.ts |
Replace a collection’s loader; its schema checks every entry at build time — Astro templates |
| HTML | Written into the pages | No CMS connection — edit the files, use a visual editor, or move to the Astro or Next.js edition — HTML templates |
Those three pages explain the approach once for every template. What differs from one template to the next — its collections and their fields — is on the template’s own Using a headless CMS page, in its docs under Headless CMS.
Step-by-step guides
Section titled “Step-by-step guides”| Guide | Edition | CMS |
|---|---|---|
| Connect Payload CMS to a Next.js template | Next.js — tested with Nitip; the same for every template | Payload — free, open source, runs inside the same Next.js app |
| Connect Payload CMS to an Astro template | Astro — tested with Nitip; the same for every template | Payload as a separate app; the static site rebuilds from it on save |
| Connect Sanity to a Next.js template | Next.js — tested with Nitip; the same for every template | Sanity — hosted, with Sanity Studio inside your site at /studio |
| Connect Sanity to an Astro template | Astro — tested with Nitip; the same for every template | Sanity with its own Studio; the static site rebuilds from it on publish |
| Connect Strapi to a Next.js template | Next.js — tested with Nitip; the same for every template | Strapi — free, open source, self-hosted next to the site |
| Connect Strapi to an Astro template | Astro — tested with Nitip; the same for every template | Strapi next to the site; the static site rebuilds from it on publish |
| Connect Directus to a Next.js template | Next.js — tested with Nitip; the same for every template | Directus — self-hosted in Docker, an admin on top of your own SQL database |
| Connect Directus to an Astro template | Astro — tested with Nitip; the same for every template | Directus in Docker; the static site rebuilds from it on save |
Guides for more CMSs are being written.
Rather have it done for you?
Section titled “Rather have it done for you?”Connecting a CMS to your template is part of our custom work — tell us which template and CMS you use.