Using a headless CMS — Titen 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 Titen.

Collections

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

Collection	Key fields
Category	slug, title
Project	slug, title, location, year, category (a category’s slug), image, summary, intro (text, portrait image, three gallery images), story (image, text, wide image), details (two texts, three gallery images), closing (one or two parts: text and image)
Service	slug, number, title, overview, image, points (five key points), about, included (rich text)
Post	slug, title, excerpt, image, category, author, date, body (rich text)
Testimonial	slug, quote, name, photo, rating (optional)

• A category’s slug is a top-level URL (/residential): keep it clear of the other pages’ paths.
• A project refers to its category by its slug. Model it as a reference and return the 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. Home shows the first seven projects (the seventh wide), four services, three posts and five testimonials.

Rich text

Post bodies and a service’s “What’s included” are blocks, not HTML:

{ type: "heading", text: "…" }
{ 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 wide project photos and posts. Using a CMS’s images in the site: Images.