---
title: Quick start guide: Next.js React
slug: graph/docs/quick-start-guide-nextjs-react
docTags: 
createdAt: 2026-09-01T10:25:46.706Z
---

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](https://www.apollographql.com/docs/react), 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.

```bash
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.

```bash
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.

```typescript
// 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.

```typescript
# .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.

```typescript
// 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.

```typescript
// 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.

```typescript
// 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.js](docId\:gS1GIMgA4RWyuT-H0RK_E).