Introduction

Optimizely SaaS Core is an exciting new development in the world of content management systems, currently in beta. In this blog post, We’ll walk through the process of creating a simple website using Optimizely SaaS Core and integrating it with a Next.js project. If you haven’t already, you can join the waitlist for Optimizely SaaS Core here.

Creating Content Types

The first step is defining the content types for your website. In this example, We’ll create one page (Start Page) and define two fields: Title (string) and Description (XHTML string).

Once the content type is defined, the next step is creating the start page item in the CMS.

Setting Up the Website

After creating the start page item, the website needs to be set up in the Settings view of the CMS. This step prepares the system for synchronization with Optimizely Graph.

Synchronizing Data with Optimizely Graph

To synchronize data types and content with Optimizely Graph, the “Optimizely Graph content synchronization job” needs to be run.

If any errors occur, resetting the account might be necessary.

Next.js Project Integration

Assuming you have the necessary prerequisites, including a working knowledge of React and TypeScript, let’s dive into creating a Next.js project to seamlessly integrate with Optimizely SaaS Core. Follow these steps to get started:

Install Next.js

Open your terminal window and enter the following command to create a new Next.js project using version 13.4 or the latest.

npx create-next-app@13.4

During the installation process, you will be prompted with questions. Accept all the default configurations unless you have specific requirements for your project.

Navigate to Your Project

Once the installation is complete, navigate to the newly created project folder. Use the following command to change into the project directory:

cd your-project-name

Run the Development Server

Start the development server by entering the following command:

npm run dev

This command initiates the development server and runs your Next.js application. Confirm that everything is set up correctly by visiting http://localhost:3000 in your browser. You should see your project up and running.

Integrating Apollo for GraphQL Data Fetching

To seamlessly fetch data from Optimizely CMS SaaS using GraphQL within your Next.js project, you’ll need to integrate Apollo, a powerful library for managing GraphQL data. Follow these steps to set up Apollo in your project:

Install Apollo Client

Open your terminal and use the following command to install the Apollo Client package:

npm install @apollo/client

This package allows you to interact with GraphQL APIs in your Next.js application.

Create Apollo Client Configuration

In your project, create a file named apolloClient.js in the /lib folder (you may need to create the folder if it doesn’t exist) with the following content:

import { ApolloClient, InMemoryCache } from "@apollo/client";

const apolloClient = () => {
    return new ApolloClient({
        uri: "https://cg.optimizely.com/content/v2?auth=sigle-key",
        cache: new InMemoryCache(),
    });
};

export default apolloClient;

Replace https://cg.optimizely.com/content/v2?auth=single-key with the actual GraphQL single key provided by Optimizely.

Update Your Page Component to Fetch Data

Open the page.tsx file in the /app folder and update it to include the following code for fetching the StartPage data:

import React from "react";
import apolloClient from "@/app/lib/apolloClient";
import { gql } from "@apollo/client";

export default async function Home() {
  const client = apolloClient();

  var data = await client.query({
    query: gql`
      query MyQuery {
        StartPage {
          items {
            Title
            Description
          }
        }
      }
    `,
  });

  var page = data.data.StartPage.items[0];

  return (
    <>
      <h1>{page.Title}</h1>
      <p>{page.Description}</p>
    </>
  );
}

Ensure that you have the appropriate GraphQL query in your project. You can generate it using the Optimizely Graph view:

Go back to your browser and refresh the page to see the changes reflected. Navigate to http://localhost:3000 and ensure that the Title and Description values of the StartPage are displayed as expected.

Customize Styles (Optional)

If you want to make further style adjustments, you can modify the global styles in the globals.css file. Follow these steps to remove the background attribute from the body element:

• Locate the globals.css file in the /app folder of your project.
• Open the file and find the style for the body element.
• Remove the background attribute or modify it according to your preferences.

body {
  color: rgb(var(--foreground-rgb));
}

After making changes to the styles, go back to your browser and refresh the page. Observe how the visual presentation of your Next.js application has been updated based on the modified styles.

In the next blog posts, we’ll explore more advanced topics such as dynamic routes and rendering different page types, providing you with a comprehensive guide to optimizing your project with Optimizely SaaS Core. Stay tuned for more insights and tips on leveraging this cutting-edge technology in your projects.