Integrating a Vanilla Next.js Application with Sitecore CDP using Engage SDK

 If you're working with a vanilla version of Next.js and need to integrate it with Sitecore CDP, this blog will walk you through using the Engage SDK to send behavioral and identity data to Sitecore CDP.

Note: If you're using the XM Cloud Starter Kit, you can skip this guide — . This guide is only applicable for standalone (vanilla) Next.js applications.

---

🧩 Why Use Engage SDK?

Sitecore CDP's Engage SDK allows developers to:

• Track user behaviors such as page views.

• Identify users using custom identifiers (e.g., email).

• Send data to Sitecore CDP in real time.

---

✅ Prerequisites

• A vanilla Next.js project (not the XM Cloud starter).

• Sitecore CDP access with appropriate client credentials.

• A Point of Sale (POS) configured in CDP.

---

🛠 Steps to Integrate Engage SDK with Next.js

1. Create a Vanilla Next.js Project

We won’t go into details here — this guide assumes you're already familiar with setting up a Next.js app.

---

2. Install Engage SDK

Run the following command to install Sitecore’s Engage SDK:

npm install @sitecore/engage

---

3. Configure Environment Variables

Create a .env.local file in the root of your project (not inside /src) and add the following:

# CDP Related variables
NEXT_PUBLIC_CDP_CLIENT_KEY=xxxxxxxxxxxxxxxxxxxx
NEXT_PUBLIC_CDP_TARGET_URL=https://api-engage-ap.sitecorecloud.io
NEXT_PUBLIC_CDP_POINTOFSALE=abcd

How to find these values:

• NEXT_PUBLIC_CDP_CLIENT_KEY: Available in your Sitecore CDP instance under API Access.

• NEXT_PUBLIC_CDP_POINTOFSALE: You can create a new POS in Sitecore CDP. This is used to segment and track data effectively.

---

4. Initialize the Engage SDK

Create a file called engage.ts inside the /src folder:

'use client';

import { init, Engage } from '@sitecore/engage';

interface InitConfig {
  clientKey: string;
  targetURL: string;
  pointOfSale: string;
  cookieDomain: string;
  cookieExpiryDays: number;
  forceServerCookieMode: boolean;
  includeUTMParameters: boolean;
  webPersonalization: boolean | object;
}

let engage: Engage | undefined;

const loadEngage = async (): Promise<void> => {
  const config: InitConfig = {
    clientKey: process.env.NEXT_PUBLIC_CDP_CLIENT_KEY || '',
    targetURL: process.env.NEXT_PUBLIC_CDP_TARGET_URL || '',
    pointOfSale: process.env.NEXT_PUBLIC_CDP_POINTOFSALE || '',
    cookieDomain: window.location.hostname.replace(/^www\./, ''),
    cookieExpiryDays: 365,
    forceServerCookieMode: false,
    includeUTMParameters: true,
    webPersonalization: true,
  };

  engage = await init(config);
  (window as any).Engage.exposedFunctions = engage;
};

loadEngage();

export { engage };

---

5. Create a Component to Trigger PageView & Identity Events

Create a component called CdpPageviewengage.tsx inside the /components folder:

'use client';

import { useEffect } from 'react';
import { engage } from '../engage';
import { JSX } from 'react';

const CdpPageviewengage = (): JSX.Element => {
  useEffect(() => {
    // Send page view event
    engage?.pageView({
      channel: 'WEB',
      currency: 'USD',
      page: window.location.pathname,
      language: 'en',
    });

    // Send identity event
    engage?.identity({
      channel: 'WEB',
      currency: 'USD',
      firstName: 'ChandanCDPEngage',
      lastName: 'Kumar',
      email: 'chandan12.engageupdated@gmail.com',
      identifiers: [
        {
          provider: 'Email',
          id: 'chandan.itmeengage@gmail.com"',
        },
      ],
    }).catch((e) => console.debug(e));
  }, []);

  return <></>;
};

export default CdpPageviewengage;

---

6. Import the Component in Your Layout

To ensure events are fired on each page load, import the CdpPageviewengage component into your main layout component (e.g., _app.tsx or wherever your layout is defined):

import CdpPageviewengage from '../components/CdpPageviewengage';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <CdpPageviewengage />
      <Component {...pageProps} />
    </>
  );
}

---

✅ Verification Steps

Once everything is wired up, here’s how to validate the integration:

1. Browser Cookies: Check the bx_guest_ref cookie in DevTools > Application > Cookies.

1. Network Tab: You should see network requests for:

• PageView event

• Identity event

1. Sitecore CDP:

• Log into your CDP instance.

• Search by bx_guest_ref cookie value.

• You should see the guest profile and associated data.

---

🔗 GitHub Repo

You can find the full implementation in this GitHub repository 

---

🧠 Final Thoughts

Using the Engage SDK is a straightforward way to connect a vanilla Next.js app with Sitecore CDP for personalized tracking and customer identification. Once implemented correctly, you unlock the power of Sitecore CDP to deliver real-time personalization and deep customer insights.

Happy coding! 🚀