Skip to main content

Headless CMS starter

With this starter kit you can use Contember platform as headless CMS and Next.js for frontend site.

You'll get:

  • Pages with 7 blocks (Hero section, Logos section, Content section, Features section, CTA section, Testimonial section, Contact section).
  • Blog and articles with powerful WYSIWYG editor.
  • Messages for saving forms from the frontend website.
  • Website settings (upload logotype, set up navigation).
  • ACL rules for administrators and public access for frontend website.
  • Basic Next.js website intentionally without any styling. See how you can easily query GraphQL API provided by Contember.

Thanks to Contember platform you can change anything. If you have any questions, we're happy to help in Discord.

Screenshot 2022-01-18 at 14 08 17

How to customise the starter kit

First, you should get to know our Quickstart. You can change our starter kit as you want to. Below, you can find some examples of possible customization.

Add new page content section

Pages are build from content sections. We've prepared 7 content sections for you (Hero section, Logos section, Content section, Features section, CTA section, Testimonial section and Contact section).

Let's say you want to add new section with text and image next to each other.

1. Change the model

Go to headless-cms/api/model/ContentBlocks.ts and add 'imageWithTextSection' option to ContentBlockType enum. We'll use image and content fields from ContentBlock to store our data.

export const ContentBlockType = def.createEnum(

2. Create and execute a migration

Run migration command to apply your changes.

npm run contember migrations:diff headless-cms add-image-with-text-section

Select "Yes and execute immediately" and wait for the migration to finish.

3. Add a new block to Admin

Go to headless-cms/admin/components/ContentBlocks.tsx file and add <Block /> component into <BlockRepeater /> component. <Block /> should contain all necessary fields for your new section. We want to have an image with text, so we'll add a custom component <ContentField /> (you can learn more in /headless-cms/admin/components/ContentField.tsx) for text and <ImageUploadField /> component for the image.

export const ContentBlocks = Component(
() => (
addButtonText="Add content block"
<Block discriminateBy="imageWithTextSection" label="Image with text section">
<ContentField />
<TextField field="image.alt" label={locale["Alternative text"]} />

Now you can check your new section in Admin and try adding this new block to a page.

4. Add new section to next.js frontend

Now, we need to render the block on frontend.

Go to headless-cms/head/components/blocks.tsx and add new react component called ImageWithText which will render content and image. Next, you'll need to add your new component to block map in Blocks component.

function ImageWithText({ content, image }) {
return (
{content?.parts &&
<RichTextRenderer blocks={} sourceField="json" />
{image &&
<img src={image.url} width={image.width} height={image.height} alt={image.alt} />

export default function Blocks({ blocks }) {
return blocks ? => {
const blocksElements = {
heroSection: <HeroSection {...block} key={} />,
logosSection: <LogoSection {...block} key={} />,
contentSection: <ContentSection {...block} key={} />,
featureSection: <FeatureSection {...block} key={} />,
ctaSection: <CtaSection {...block} key={} />,
testimonialSection: <TestimonialSection {...block} key={} />,
contactSection: <ContactSection {...block} key={} />,
imageWithText: <ImageWithText {...block} key={} />,

return blocksElements[block.type]
}) : null

That's all. Now you can use your new section in your website.

Reusable testimonials

You've decided that you want to edit all your testimonials in one place. You can easily do that, thanks to the Contember.

1. Change model

Create new entities called Testimonial and TestimonailAuthor in headless-cms/api/model/ folder.

import { SchemaDefinition as def } from "@contember/schema-definition"
import { Content } from "./Content"
import { Image } from "./Image"

export class Testimonial {
content = def.oneHasOne(Content)
author = def.oneHasOne(TestimonailAuthor)

export class TestimonailAuthor {
name = def.stringColumn().notNull()
title = def.stringColumn()
image = def.manyHasOne(Image)

Go to headless-cms/api/model/ContentBlock.ts and remove TestimonialAuthor entity. Replace content and author fields with testimonial field.

import { Testimonial } from "./Testimonial"
export class ContentTestimonial {
order = def.intColumn().notNull()
testimonial = def.manyHasOne(Testimonial)
contentBlock = def.manyHasOne(ContentBlock, "testimonials").cascadeOnDelete()

Export new Testimonial entities in headless-cms/api/model/index.ts.

export * from './Article'
export * from './Button'
export * from './ContactMessage'
export * from './Content'
export * from './ContentBlock'
export * from './Image'
export * from './Link'
export * from './Menu'
export * from './Page'
export * from './Seo'
export * from './Setting'
export * from './Testimonial'

To add newly created entities, you will need to update the public entry in the access control list.

const aclFactory = (model: Model.Schema): Acl.Schema => ({
roles: {
admin: {
variables: {},
stages: '*',
entities: PermissionsBuilder.create(model).allowAll().allowCustomPrimary()
s3: {
'**': {
upload: true,
read: true,
public: {
variables: {},
stages: '*',
s3: {
'**': {
upload: false,
read: true,
entities: {
Testimonial: {
predicates: {},
operations: readOnly(model, 'Testimonial', true),

2. Execute migrations

Run migration command to aplicate your changes.

npm run contember migrations:diff headless-cms separate-testimonials-from-content

Select "Yes and execute immediately" and wait for the migration to finish.

3. Update Admin

You'll need to add page where you can edit all your testimonials.

import * as React from "react"
import { CreatePage, DataGridPage, EditPage, LinkButton, TextCell, HasOne, TextField } from "@contember/admin"
import { ContentField } from '../components/ContentField'
import { ImageField } from '../components/ImageField'

export const TestimonialList = (
title: "Testimonials",
actions: <LinkButton to="testimonialCreate">Add testimonial</LinkButton>,
<TextCell field="" header="Author's name" />

export const TestimonialCreate = (
rendererProps={{ title: "Add testinomial" }}
redirectOnSuccess="testimonialEdit(id: $"
<ContentField label="Testimonial" />
<HasOne field="author">
<TextField field="name" label="Author's name" />
<ImageField field="image" label="Author's photo" />

export const TestimonialEdit = (
<EditPage entity="Testimonial(id=$id)" rendererProps={{ title: "Edit testimonial" }}>
<ContentField label="Testimonial" />
<HasOne field="author">
<TextField field="name" label="Author's name" />
<ImageField field="image" label="Author's photo" />

Add a new page to navigation in headless-cms/admin/components/Navigation.tsx.

export const Navigation = () => (
<Menu.Item title={locale["Pages"]} to="pageList" />
<Menu.Item title={locale["Articles"]} to="articleList" />
<Menu.Item title={locale["Messages"]} to="messageList" />
<Menu.Item title={locale["Settings"]} to="settings" />
<Menu.Item title={locale["Navigation"]} to="navigationList" />
<Menu.Item title={locale["Testimonials"]} to="testimonialList" />
<Menu.Item title={locale["SEO"]}>
<Menu.Item title={locale["Articles"]} to="seoArticles" />
<Menu.Item title={locale["Pages"]} to="seoPages" />

Last but not least, replace <Repeater /> fields in the Testimonial Content block in headless-cms/admin/components/ContentBlocks.tsx.

label={<LabelWithIcon icon={<IconTestimonialSection />} label={locale["Testimonial section"]} />}
<TextField field="primaryText" label={locale["Headline"]} />
<ContentField />
addButtonText="Add testimonial"
<SelectField field="testimonial" label={locale["Testimonial"]} options="" />

That's all. Now you can edit your all your testimonals in one place.