Next.js Quickstart: Fetch CMS 12 Content with Apollo Client and Optimizely Graph

Build a Next.js application that connects to Optimizely Graph to fetch and display CMS 12 content. This guide walks you through creating a Next.js project, installing dependencies, configuring Apollo Client, and building a component to query and render content using GraphQL. By the end, you will have a working setup that retrieves articles from your CMS instance and renders them in your application. For more advanced scenarios, explore features like live preview integration, content filtering, pagination, and GraphQL subscriptions to build dynamic, content-driven experiences.

Prerequisites

Node.js 18 or later.
npm 9 or later.
Content Management System 12 (CMS 12).

1. Create a Next.js project

npx create-next-app@latest my-optimizely-site
cd my-optimizely-site

2. Install GraphQL dependencies

npm install @apollo/client graphql

3. Set up Apollo Client

Create an Apollo client instance to connect to Optimizely Graph.

// lib/apollo-client.ts
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';

const httpLink = createHttpLink({
  uri: 'https://cg.optimizely.com/content/v2?auth=3JCcia5gTU2RTiOv2aUCXu1ktYJjqzGgjXh2AVMFvxPyhJOY&stored=true',
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

export default client;

4. Configure environment variables (optional)

You can store the Optimizely Graph endpoint in an environment variable instead of hardcoding it.

# .env.local
NEXT_PUBLIC_OPTIMIZELY_GRAPH_ENDPOINT=https://cg.optimizely.com/content/v2?auth=3JCcia5gTU2RTiOv2aUCXu1ktYJjqzGgjXh2AVMFvxPyhJOY&stored=true

5. Configure the app provider

Wrap your application in an ApolloProvider so components can access GraphQL data.

// pages/_app.tsx
import { ApolloProvider } from '@apollo/client';
import client from '../lib/apollo-client';

export default function App({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

6. Create a component to fetch content

Use Apollo’s useQuery hook to fetch articles from Optimizely Graph.

// components/ArticleList.tsx
import { useQuery, gql } from '@apollo/client';

const GET_ARTICLES = gql`
  query GetArticles {
    ArticlePage(orderBy: { _modified: DESC }, limit: 10) {
      items {
        Name
        RelativePath
        TeaserText
        PageImage {
          Url
        }
        MainBody
      }
      total
    }
  }
`;

export default function ArticleList() {
  const { loading, error, data } = useQuery(GET_ARTICLES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>Latest Articles</h1>
      {data.ArticlePage.items.map((article) => (
        <div key={article.RelativePath}>
          {article.PageImage && (
            <img src={article.PageImage.Url} alt={article.Name} />
          )}
          <h2>{article.Name}</h2>
          <p>{article.TeaserText}</p>
          <a href={article.RelativePath}>Read more</a>
        </div>
      ))}
    </div>
  );
}

7. Use the component in a page

Add the ArticleList component to your homepage.

// pages/index.tsx
import ArticleList from '../components/ArticleList';

export default function Home() {
  return (
    <div>
      <ArticleList />
    </div>
  );
}

Next Steps

Explore additional features and enhancements with your Next.js application and Optimizely Graph:

Enable Live Preview Integration – Let editors preview content in real time before publishing. See Live Preview with Next.js .