Integrate CreativeEditor SDK with Next.js

In this example, we will show you how to integrate CreativeEditor SDK with Next.js.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

Prerequisites#

No trial license key required.#

The trial of CreativeEditor SDK works without a license key. A commercial license key is required for use in a production environment. Get a license key at Pricing

Setup#

Note that, for convenience we serve all SDK assets (e.g. images, stickers, fonts etc.) from our CDN by default. For use in a production environment we recommend serving assets from your own servers.

1. Add CE.SDK to your Project#

Install the @cesdk/cesdk-js dependency via

npm install --save @cesdk/cesdk-js.

The SDK is served entirely via CDN, so we just need to import the CE.SDK module and the stylesheet containing the default theme settings.

CreativeEditorSDK.jsx

import CreativeEditorSDK from '@cesdk/cesdk-js';

2. Create an empty Container#

We need to add an empty <div> as a container for the SDK. We configure the <div> element to fully fill the browser window.

CreativeEditorSDK.jsx

    <div
      ref={cesdk_container}
      style={{ width: '100vw', height: '100vh' }}
    ></div>

3. Create a component containing the SDK#

We'll now create a CreativeEditorSDK component, that's responsible for initializing the SDK and attaching it to the previously created container. To allow configuration of the SDK from outside the component, we pass a config object from the component's props.

CreativeEditorSDK.jsx

const Component = (props = {}) => {
  const cesdk_container = useRef(null);
  useEffect(() => {
    if (cesdk_container.current) {
      // Serve assets from IMG.LY CDN or locally
      props.config.baseURL =
        'https://cdn.img.ly/packages/imgly/cesdk-js/1.3.0/assets';

      CreativeEditorSDK.init(cesdk_container.current, props.config).then(
        (instance) => {
          /** do something with the instance of CreativeEditor SDK **/
        }
      );
    }
  }, [props]);

  return (
    <div
      ref={cesdk_container}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
};

4. Managing the container reference#

To let CE.SDK use the container created by our component, we use useRef to acquire a reference to the element and pass it as the first parameter to CreativeEditorSDK.init.

CreativeEditorSDK.jsx

  const cesdk_container = useRef(null);

5. Dealing with server side rendering (SSR)#

The CreativeEditor SDK is a client side library that requires various browser features. Therefore, it must be loaded and executed in the browser. The easiest way is to introduce an additional component (CreativeEditorSDKWithNoSSR), that loads the library dynamically when the page is loaded in the browser:

import dynamic from 'next/dynamic'

const CreativeEditorSDKWithNoSSR = dynamic(() => import('./CreativeEditorSDK'), {
  ssr: false
})

export default CreativeEditorSDKWithNoSSR;

6. Serving Webpage locally#

In order to use the editor we need to run our project via npx which comes bundled with npm.

npx next dev will spin up a development server at http://localhost:3000

Congratulations!#

You've got CE.SDK up and running. Get to know the SDK and dive into the next steps, when you're ready:

import React from 'react';

import CreativeEditorSDK from '@cesdk/cesdk-js';

import { useRef, useEffect } from 'react';

const Component = (props = {}) => {
  const cesdk_container = useRef(null);
  useEffect(() => {
    if (cesdk_container.current) {
      // Serve assets from IMG.LY CDN or locally
      props.config.baseURL =
        'https://cdn.img.ly/packages/imgly/cesdk-js/1.3.0/assets';

      CreativeEditorSDK.init(cesdk_container.current, props.config).then(
        (instance) => {
          /** do something with the instance of CreativeEditor SDK **/
        }
      );
    }
  }, [props]);

  return (
    <div
      ref={cesdk_container}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
};

export default Component;