CMS for React

React gives teams full control over UI architecture, while Noma provides structured content, localization, assets, and workflow controls behind an API-first platform boundary.

This separation keeps CMS complexity out of component code and makes it easier to evolve product UI independently of editorial operations.

Keep API keys on trusted server infrastructure. Frontend React clients should request content from your backend endpoints, not from direct privileged CMS calls.

// server/noma.ts
import { createClient } from "@nomacms/js-sdk";
 
export function getNomaServerClient() {
  const projectId = process.env.NOMA_PROJECT_ID;
  const apiKey = process.env.NOMA_API_KEY;
  if (!projectId || !apiKey) {
    throw new Error("Missing NOMA_PROJECT_ID or NOMA_API_KEY");
  }
  return createClient({ projectId, apiKey });
}

This pattern works with Node APIs, serverless functions, and framework route handlers.

Normalize content responses in your backend so React components receive stable payloads regardless of CMS query shape or pagination mode.

// Example Express or route handler endpoint
import { getNomaServerClient } from "./noma";
 
export async function listPosts(req, res) {
  const noma = getNomaServerClient();
  const result = await noma.content.list("posts", {
    state: "published",
    locale: req.query.locale ?? "en",
    paginate: 20,
    sort: "created_at:desc",
  });
  const posts = "data" in result ? result.data : result;
  res.json(posts);
}

Use locale-aware queries and published state by default for production-facing experiences.

Noma's explicit publish lifecycle helps React teams separate authoring from release, with version history available for incident recovery.

await noma.content.patch("posts", postUuid, {
  data: { title: "Updated title" },
});
 
await noma.content.publish("posts", postUuid);
 
const versions = await noma.content.versions.list("posts", postUuid);

• Next.js: Use server components or route handlers. See CMS for Next.js.
• Vite + React: Serve frontend from static hosting and run Noma calls in a separate backend service.
• Remix or custom SSR: Fetch in loaders/server handlers and keep credentials server-only.

Teams can automate schema and content tasks with @nomacms/mcp-server and installable workflows from Agent Skills.

CMS for Next.js · SDK setup · Headless CMS overview