Render with React

Render CMS content in a React application by mapping content types to React components and using the Optimizely JavaScript SDK to resolve and render them at runtime.

Before you begin

Ensure that you have completed the following:

Modeled the Article content type
Created content in the CMS
Configured Graph access and fetched content by path
Set up a Next.js application with the Optimizely JavaScript SDK

1. Create a React component for a content type

Create a React component that renders the Article content type.

Open src/components/Article.tsx.

Add the following implementation:

import { contentType, Infer } from '@optimizely/cms-sdk';
import { RichText } from '@optimizely/cms-sdk/react/richText';

export const ArticleContentType = contentType({
  key: 'Article',
  baseType: '_page',
  properties: {
    heading: {
      type: 'string',
    },
    body: {
      type: 'richText',
    },
  },
});

type Props = {
  opti: Infer<typeof ArticleContentType>;
};

export default function Article({ opti }: Props) {
  return (
    <main>
      <h1>{opti.heading}</h1>
      <RichText content={opti.body?.json} />
    </main>
  );
}

This component receives CMS data through the opti prop and renders it using standard React elements. Use the RichText component to safely render rich text content stored in the CMS.

📘
Note
For advanced configuration options, fallback handling, and TypeScript support, see the RichText component reference.

2. Register the React component

Open src/app/layout.tsx.

import Article, { ArticleContentType } from '@/components/Article';
import { initContentTypeRegistry } from '@optimizely/cms-sdk';
import { initReactComponentRegistry } from '@optimizely/cms-sdk/react/server';

initContentTypeRegistry([ArticleContentType]);

initReactComponentRegistry({
  resolver: {
    Article,
  },
});

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

The component registry maps CMS content types to React components by key. When the SDK encounters an Article content item, it renders it using the Article component.

3. Render content using the Optimizely component resolver

Update the page implementation to render content instead of displaying raw JSON.

Open src/app/[...slug]/page.tsx.

Replace the return statement with the OptimizelyComponent:

import { GraphClient } from '@optimizely/cms-sdk';
import { OptimizelyComponent } from '@optimizely/cms-sdk/react/server';
import React from 'react';

type Props = {
  params: Promise<{
    slug: string[];
  }>;
};

export default async function Page({ params }: Props) {
  const { slug } = await params;

  const client = new GraphClient(process.env.OPTIMIZELY_GRAPH_SINGLE_KEY!, {
    graphUrl: process.env.OPTIMIZELY_GRAPH_GATEWAY,
  });

  const content = await client.getContentByPath(`/${slug.join('/')}/`);

  return <OptimizelyComponent opti={content[0]} />;
}

The OptimizelyComponent automatically resolves the correct React component based on the content type and renders it with the fetched data.

4. Verify rendering

Start the application:

npm run dev

Open the site in a browser:

http://localhost:3000/en/

The page renders the published CMS content using the registered React component.

Next steps

You have completed the basic setup for rendering CMS content with React.

Continue with the following topics:

Add live preview – Enable real-time content editing and preview
Add experiences – Create personalized content experiences
Add display settings – Control how content renders across contexts