Skip to main content

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#

In this example, we will use the SDK directly via our CDN. 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.

JavaScript
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.

JavaScript
<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.

JavaScript
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.0.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.

JavaScript
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:

JavaScript
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.0.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;