Overview

ZERKO_CMS_URL=https://cms.zerko.app
ZERKO_CMS_API_KEY=zrk_live_your_key_here

X-Zerko-Api-Key: zrk_live_your_key_here

GET /content?type=blog&page=1&limit=12

{
  "data": [],
  "meta": {
    "page": 1,
    "limit": 12,
    "total": 0,
    "pages": 0
  }
}

{
  "$id": "article_id",
  "type": "blog",
  "title": "Building better customer experiences",
  "slug": "building-better-customer-experiences",
  "excerpt": "A practical guide for growing teams.",
  "content": "<p>Rich, sanitized HTML content...</p>",
  "coverImage": "https://.../hero.jpg",
  "featured": true,
  "tags": ["customer experience", "growth"],
  "metadata": {},
  "downloads": [],
  "publishedAt": "2026-08-09T10:00:00Z",
  "updatedAt": "2026-08-09T10:00:00Z"
}

type PageProps = { params: Promise<{ slug: string }> };

export default async function ArticlePage({ params }: PageProps) {
  const { slug } = await params;
  const response = await fetch(
    `${process.env.ZERKO_CMS_URL}/api/cms/public/content/${slug}`,
    {
      headers: { "X-Zerko-Api-Key": process.env.ZERKO_CMS_API_KEY! },
      next: { revalidate: 60 }
    }
  );

  if (response.status === 404) return <p>Article not found.</p>;
  if (!response.ok) throw new Error("Could not load article");

  const { data: article } = await response.json();
  return (
    <article>
      <h1>{article.title}</h1>
      <div
        className="article-content"
        dangerouslySetInnerHTML={{ __html: article.content }}
      />
    </article>
  );
}

.article-content { color: #27272a; font-size: 1.08rem; line-height: 1.8; }
.article-content h2 { margin: 2.5rem 0 1rem; font-size: 1.8rem; }
.article-content h3 { margin: 2rem 0 .75rem; font-size: 1.35rem; }
.article-content p, .article-content ul, .article-content ol { margin: 1rem 0; }
.article-content blockquote { border-left: 3px solid #c8a45d; padding-left: 1rem; }
.article-content img { display: block; max-width: 100%; height: auto; border-radius: 1rem; }
.article-content a { color: inherit; text-decoration: underline; }
.article-content pre { overflow-x: auto; padding: 1rem; border-radius: .75rem; }

{
  "site": {
    "siteName": "Zerko",
    "tagline": "Build better, faster.",
    "logoUrl": "https://.../logo.png",
    "faviconUrl": "https://.../favicon.png",
    "primaryColor": "#C8A45D",
    "locale": "en",
    "timezone": "Africa/Dar_es_Salaam",
    "seoTitle": "Zerko",
    "seoDescription": "...",
    "imageOptimizationEnabled": true,
    "imageQuality": 85,
    "imageMaxWidth": 2560,
    "social": { "linkedin": "https://linkedin.com/company/zerko" }
  },
  "content": [],
  "team": [],
  "forms": []
}

const { data: publications } = await cms.publications();

return publications.map((publication) => (
  <article key={publication.$id}>
    <h2>{publication.title}</h2>
    {publication.downloads.map((file) => (
      <a key={file.id} href={file.url} download>
        Download {file.name} ({file.mimeType})
      </a>
    ))}
  </article>
));

async function getPosts() {
  const response = await fetch(
    `${process.env.ZERKO_CMS_URL}/api/cms/public/blogs`,
    {
      headers: {
        "X-Zerko-Api-Key": process.env.ZERKO_CMS_API_KEY!
      },
      next: { revalidate: 60 }
    }
  );

  if (!response.ok) throw new Error("Could not load posts");
  return response.json();
}

export default async function BlogPage() {
  const { data: posts } = await getPosts();

  return posts.map((post) => (
    <a key={post.$id} href={`/blog/${post.slug}`}>
      <h2>{post.title}</h2>
      <p>{post.excerpt}</p>
    </a>
  ));
}

const response = await fetch(
  `${process.env.ZERKO_CMS_URL}/api/cms/public/content/${slug}`,
  { headers: { "X-Zerko-Api-Key": process.env.ZERKO_CMS_API_KEY } }
);

const { data: article } = await response.json();

const response = await fetch(
  `${process.env.ZERKO_CMS_URL}/api/cms/public/bootstrap`,
  { headers: { "X-Zerko-Api-Key": process.env.ZERKO_CMS_API_KEY } }
);

const website = await response.json();
// website.site, website.content, website.team, website.forms

const response = await fetch(
  "https://cms.zerko.app/api/cms/public/projects?page=1&limit=12",
  { headers: { "X-Zerko-Api-Key": process.env.ZERKO_CMS_API_KEY } }
);

if (!response.ok) throw new Error(`Zerko CMS returned ${response.status}`);
const { data: projects, meta } = await response.json();

{
  "data": {
    "$id": "form_id",
    "name": "Project enquiry",
    "slug": "project-enquiry",
    "successMessage": "Thanks — we received your request.",
    "active": true,
    "fields": [
      {
        "id": "full_name",
        "name": "full_name",
        "label": "Full name",
        "type": "text",
        "required": true,
        "placeholder": "Amina Said",
        "helpText": "",
        "options": []
      },
      {
        "id": "service",
        "name": "service",
        "label": "What do you need?",
        "type": "select",
        "required": true,
        "placeholder": "",
        "helpText": "Choose the closest option.",
        "options": ["Website", "Branding", "Consulting"]
      }
    ]
  }
}

{
  "data": {
    "name": "Amina Said",
    "email": "[email protected]",
    "message": "I would like to discuss a project."
  },
  "sourceUrl": "https://example.com/contact"
}

{
  "submissionId": "submission_id",
  "message": "Thank you. We will be in touch shortly."
}