Using a headless CMS — Kalme Next.js

Connecting a headless CMS works the same for every Framebrick Next.js template. The approach, rich text, images, keeping pages fresh, and step-by-step guides for Sanity, Payload, Strapi and Directus are in Use a headless CMS with a Next.js template. This page lists what is specific to Kalme.

Collections

Pages read them through src/lib/content.ts: getServices / getService, getProjects / getProject, getPosts / getPost, getLegalPages / getLegalPage, getTestimonials and getTeam. Mirror src/content/types.ts in the CMS:

Collection	Key fields
Service	slug, number, title, images (two), description, tools (label and link), offer and benefits (bold start + text), plans (id, label, price, note, what’s included)
Project	slug, title, year, image, services (label and service slug), summary, industry, overview (text, image), process (text, two images), result (bullets, image)
Post	slug, title, excerpt, image, category, date, body
LegalPage	slug, title, date, body
Testimonial	slug, quote, name, company, service, rating, photo, logo
TeamMember	name, role, email, photo

• A project refers to its services by their slug — model them as references and return label and slug in your mapping function.
• Keep the collection’s order in the CMS (a sort field) because the site shows items in the order it receives them (the home page shows the first five services, four projects and three posts).

Rich text

Posts and legal texts are blocks, not HTML:

{ type: "heading", text: "…", bold?: "…" }
{ type: "paragraph", text: "…", highlight?: "…" }       // highlight: a bold start
{ type: "list", ordered?: true, items: [[ …blocks ], [ …blocks ]] }   // each item is a list of blocks

Convert your CMS’s rich text to these blocks in your mapping function (how).

Images

Upload images at least as large as the layout uses: 1920 px for project and service photos. Using a CMS’s images in the site: Images.