Fetch content

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

Prerequisites

You have an Optimizely CMS (SaaS) instance.
You have content published in CMS (SaaS).
You have a Next.js project configured.
You have the Optimizely JavaScript SDK installed.

Get the Optimizely Graph single key

Go to CMS > Settings > API Keys.
Copy the Single Key.

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

OPTIMIZELY_GRAPH_SINGLE_KEY=<YOUR_SINGLE_KEY>

Register content types

The JavaScript SDK requires you to register content types before you can resolve content.

Open src/app/layout.tsx or 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 JavaScript SDK to map Optimizely Graph responses to your content models.

Create a dynamic route page

Create a catch-all route to resolve CMS (SaaS) 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 previous code example

Creates an Optimizely Graph client using the single key.
Resolves content by CMS (SaaS) path.
Renders the fetched content as JSON.

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 (SaaS) content rendered as JSON.

Advanced configuration

Use a non-production Optimizely Graph environment

By default, the Optimizely 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

You can continue to iterate on your application by completing the following:

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.