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 PricingSetup#
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.
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.
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
.
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
.
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 locallyprops.config.baseURL ='https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets';CreativeEditorSDK.init(cesdk_container.current, props.config).then((instance) => {/** do something with the instance of CreativeEditor SDK **/});}}, [props]);return (<divref={cesdk_container}style={{ width: '100vw', height: '100vh' }}></div>);};export default Component;