Fetch content

Create a Next.js application that connects to Optimizely Graph, retrieves published CMS content, and renders it using the Optimizely JavaScript SDK.

Create an application in Optimizely CMS, configure access to Optimizely Graph, and fetch published content in a Next.js application using the Optimizely JavaScript SDK.

Prerequisites

An Optimizely CMS (SaaS) instance
Content published in CMS
A Next.js project set up
The Optimizely JavaScript SDK installed

1. Get the Graph single key

Go to CMS > Settings > API Keys.
Under Render Content, copy the Single Key.

Add the key to your .env file in the root of your project:

OPTIMIZELY_GRAPH_SINGLE_KEY=<your-single-key>

2. Register content types

The SDK requires content types to be registered before content can be resolved.

Open src/app/layout.tsx. Create the file if it does not exist.
Register your content types using initContentTypeRegistry.

Example:

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

initContentTypeRegistry([ArticleContentType]);

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

This configuration enables the SDK to map Graph responses to your content models.

3. Create a dynamic route page

Create a catch-all route to resolve CMS paths dynamically.

Create the following file:
```
src/app/[...slug]/page.tsx
```

Verify that your project structure resembles the following:

src/
├── app/
│   ├── [...slug]/
│   │   └── page.tsx
│   └── layout.tsx
├── components/
│   └── Article.tsx
├── .env
└── package.json

Add the following code to page.tsx:

import { GraphClient } from '@optimizely/cms-sdk';
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 <pre>{JSON.stringify(content[0], null, 2)}</pre>;
}

The above code:

Creates a Graph client using the single key
Resolves content by CMS path
Renders the fetched content as JSON

4. Start the application

Start the development server:

npm run dev

Open the following URL in your browser:

http://localhost:3000/en/

You should see the published CMS content rendered as JSON.

Advanced configuration

Use a non-production Graph environment

By default, the Graph client uses the production endpoint:

https://cg.optimizely.com/content/v2

To use a different environment, pass a custom graphUrl when creating the client:

const client = new GraphClient(process.env.OPTIMIZELY_GRAPH_SINGLE_KEY!, {
  graphUrl: 'https://cg.staging.optimizely.com/content/v2',
});

Next steps

Render structured content instead of raw JSON
Add support for multiple content types
Implement error handling and loading states
Apply caching and revalidation strategies for production use

Updated about 22 hours ago