Search
Loading...
Skip to content

Existing Next.js Project

New Next.js Project
Existing Next.js Project
Clone GitHub Next.js Project
New Next.js Project Without UI

This guide walks you through how to integrate CreativeEditor SDK (CE.SDK) into a Next.js project using NPM and a custom client-side component. By the end, you’ll have a fully operational CE.SDK component embedded in your Next.js application, ready for further customization.

Who Is This Guide For?#

This guide is intended for developers who:

  • Have experience with Next.js.
  • Already have an existing Next.js project.
  • Want to integrate a powerful image and video editor into their full-stack web application.

What You’ll Achieve#

  • Install CreativeEditor SDK (CE.SDK) in your project using NPM.
  • Set up CE.SDK in your Next.js app with a custom editor component using default configurations.
  • Render CE.SDK on your Next.js pages through a client-only component.

Prerequisites#

Before getting started, make sure you meet the following prerequisites:

Step 1: Install CE.SDK#

Install CreativeEditor SDK by adding the @cesdk/cesdk-js NPM package to your project’s dependencies:

npm
yarn
pnpm
Terminal window
npm install @cesdk/cesdk-js

Step 2: Create Your Creative Editor Component#

Suppose that your Next.js project was initialized using create-next-app and follows a file structure as the one below, with components stored in the /app/components/ folder:

your-nextjs-app/
├── app/
│   ├── components/
│   │   └── ...
│   ├── favicon.ico
│   ├── globals.css
│   ├── layout.js
│   └── page.js
│
├── public/
│   └── ...
│
├── .gitignore
├── jsconfig.json
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
└── README.md

Inside the components/ folder, create a new file called CreativeEditorSDK.js and define the following component inside it:

'use client';


import CreativeEditor from '@cesdk/cesdk-js/react';


// configure CreativeEditor SDK
const config = {
  license: '<YOUR_LICENSE_KEY>', // replace with a valid CE.SDK license key
  callbacks: { onUpload: 'local' }, // enable local file uploads in the Asset Library
};


// initialization function called after SDK instance is created
const init = async (cesdk) => {
  // do something with the instance of CreativeEditor SDK (e.g., populate
  // the asset library with default / demo asset sources)
  await Promise.all([
    cesdk.addDefaultAssetSources(),
    cesdk.addDemoAssetSources({ sceneMode: 'Design' }),
  ]);


  // create a new design scene in the editor
  await cesdk.createDesignScene();
};


export default function CreativeEditorSDKComponent() {
  return (
    <CreativeEditor
      config={config}
      init={init}
      width="100vw"
      height="100vh"
    />
  );
}

Make sure to include "use client" at the top of the component file. That’s necessary because the component uses React hooks and browser-specific APIs to initialize CreativeEditor SDK.

Note: If your project doesn’t use a /components/ folder or you store components elsewhere, feel free to place CreativeEditorSDK.js in your components’ directory. Just remember to adjust your import paths accordingly in the next steps.

Step 3: Define a Client-Side Editor Component#

CreativeEditor SDK relies on browser-only features such as document and dynamic DOM manipulation. This means CreativeEditorSDKComponent must be rendered only on the client side, with server-side rendering (SSR) disabled.

To ensure that, you must import the component dynamically using Next.js’s dynamic import with ssr: false.

Instead of repeating this dynamic import wherever you need to import CreativeEditorSDKComponent, you can create a wrapper component. Inside your components/ directory, add a new file named CreativeEditorSDKNoSSR.js that exports the CreativeEditorSDKComponent with SSR turned off:

'use client';


import dynamic from 'next/dynamic';


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


export default CreativeEditorSDKNoSSR;

Now you can simply import CreativeEditorSDKNoSSR in your pages or other components without worrying about SSR compatibility.

Step 4: Use the Creative Editor Client-Side Component#

Import CreativeEditorSDKNoSSR in your page.js file (or any other components to be rendered on a page):

import { default as CreativeEditorSDK } from './components/CreativeEditorSDKNoSSR';

Next, you can render the client-side creative editor component inside your JSX with:

<CreativeEditorSDK />

page.js will contain:

// other imports...
import { default as CreativeEditorSDK } from './components/CreativeEditorSDKNoSSR';


export default function Home() {
  return (
    <>
      {/* other components.. */}
      <CreativeEditorSDK />
      {/* other components.. */}
    </>
  );
}

Step 5: Launch the Next.js Project Locally#

Start the local development server powered by Turbopack by running the following command:

Terminal window
npm run dev

By default, the Next.js app will be listening at your localhost on http://localhost:3000/.

Step 7: Test the Integration#

  1. Open http://localhost:3000/ in your browser.
  2. A fully functional CE.SDK editor should appear.

Troubleshooting & Common Errors#

❌ Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client.

  • This issue appears during development due to how Turbopack handles server rendering, combined with CreativeEditor SDK’s client-side DOM manipulations. It won’t occur in production builds. Thus, you can safely ignore it or suppress it using suppressHydrationWarning.

❌ Error: Identifier 'CreativeEditorSDK' has already been declared

  • Avoid naming your custom component function CreativeEditorSDK, as that conflicts with the class imported from @cesdk/cesdk-js. Use a different name like CreativeEditorSDKComponent.

❌ Error: document is not defined

  • That occurs because the creative editor component was rendered on the server. Make sure you’re importing CreativeEditorSDKComponent using the CreativeEditorSDKNoSSR wrapper with next/dynamic and ssr: false to ensure it runs only on the client.

❌ Error: The following dependencies are imported but could not be resolved: @cesdk/cesdk-js

  • Check that the CE.SDK package is properly installed by running npm install @cesdk/cesdk-js.

❌ Error: Editor engine could not be loaded: The License Key (API Key) you are using to access CE.SDK is invalid

  • Ensure that your license key is valid and hasn’t expired.

❌ Editor does not load

  • Open the browser console and inspect any error messages.
  • Double-check your import paths and component locations for typos or incorrect structure.

Next Steps#

Congratulations! You’ve successfully added CE.SDK to your Next.js project! Take a moment to explore its features, then move on to the next steps whenever you’re ready: