Quick start guide: Next.js React

9 min

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

Prerequisites

Confirm the runtime and product versions are in place before starting the quick start.

Node.js 18 or later.

npm 9 or later.

Content Management System 12 (CMS 12).

Create a Next.js project

Scaffold a Next.js project that hosts the Apollo Client wiring and the components introduced later in this guide.

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

Install GraphQL dependencies

Add the Apollo Client and GraphQL runtime packages that send queries to Optimizely Graph.

npm install @apollo/client graphql

Configure Apollo Client

Create an Apollo Client instance that targets Optimizely Graph so React components share a single configured client.

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

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

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

export default client;

Configure environment variables (optional)

Move the Optimizely Graph endpoint into an environment variable so each environment overrides the value without code changes.

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

Configure the app provider

Wrap the application in an ApolloProvider so every component reads GraphQL data through the configured client.

// 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>
  );
}

Create a component to fetch content

Build a React component that fetches articles from Optimizely Graph through Apollo's useQuery hook and renders them in the page.

// 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>
  );
}

Use the component in a page

Render ArticleList from the homepage so the Optimizely Graph content displays when the application starts.

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

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

Next steps

Extend the Next.js application with deeper Optimizely Graph integrations after the base quick start runs.

Enable live preview integration – Let editors preview content in real time before publishing. See Live preview with Next.jsLive preview with Next.js.