Skip to content

New Next.js Project

This guide walks you through setting up a new Next.js project from scratch and integrating CreativeEditor SDK (CE.SDK) using NPM and a custom client-side component. By the end, you’ll have a fully working CE.SDK component integrated into your Next.js app, ready for further customization.

Who Is This Guide For?

This guide is intended for developers who:

  • Have basic experience with Next.js.
  • Want to create a new Next.js project.
  • Desire to build a page in their application that includes a fully featured image and video editor client-side component.

What You’ll Achieve

  • Initialize a new Next.js project using create-next-app.
  • Install the CreativeEditor SDK (CE.SDK) via NPM.
  • Integrate CE.SDK into your Next.js project using a custom creative editor component with default settings.
  • Use CE.SDK in your Next.js pages through a client-side component.

Prerequisites

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

Step 1: Set Up a New Next.js Project

Using the create-next-app CLI tool is the recommended way to initialize a new Next.js project. To create a new blank Next.js project called my-nextjs-app, run the following command:

Terminal window
npx create-next-app@latest my-nextjs-app

You’ll be prompted with a few questions. The default answers will work fine, except for the programming language option, as here we’ll use JavaScript instead of TypeScript for simplicity.

A new Next.js project will be created in the my-nextjs-app folder. Navigate into the project folder in the terminal:

Terminal window
cd my-nextjs-app

Below is the file structure the Next.js project folder should contain:

my-nextjs-app/
├── app/                # Application source code
│   ├── favicon.ico     # Application favicon
│   ├── globals.css     # Global styles
│   ├── layout.js       # Main layout component
│   └── page.js         # Main page component
│
├── public/              # Static assets
│   ├── file.svg        # Sample SVG file
│   ├── globe.svg       # Globe SVG asset
│   ├── next.svg        # Next.js logo SVG
│   ├── vercel.svg      # Vercel logo SVG
│   └── window.svg      # Window SVG asset
│
├── .gitignore          # Git ignore file
├── jsconfig.json       # JavaScript configuration file
├── next.config.mjs     # Next.js configuration file
├── package-lock.json   # Lock file for package dependencies
├── package.json        # Project dependencies and scripts
├── postcss.config.mjs  # PostCSS configuration file
└── README.md           # Project README file

Make sure the project’s dependencies have been installed with:

Terminal window
npm install

Step 2: Install CE.SDK

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

Terminal window
npm install @cesdk/cesdk-js

Step 3: Create Your Creative Editor Component

Add a components/ folder to the app/ folder of your new Next.js project:

app/
 ├── components/ # the new folder
 ├── ...
 └── page.js

Inside the components/ folder, create a new file named CreativeEditorSDK.js defining the following component:

'use client';


import { useEffect, useRef, useState } from 'react';
import CreativeEditorSDK from '@cesdk/cesdk-js';


// 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
};


export default function CreativeEditorSDKComponent() {
  // reference to the container HTML element where CESDK will be initialized
  const cesdk_container = useRef(null);
  // define a state variable to keep track of the CESDK instance
  const [cesdk, setCesdk] = useState(null);


  useEffect(() => {
    // prevent initialization if the container element is not available yet
    if (!cesdk_container.current) {
      return;
    }


    // flag to keep track of the component unmount
    let cleanedUp = false;
    // where to store the local CE.SDK instance
    let instance;


    // initialize the CreativeEditorSDK instance in the container HTML element
    // using the given config
    CreativeEditorSDK.create(cesdk_container.current, config).then(
      async _instance => {
        // assign the current CD.SDK instance to the local variable
        instance = _instance;


        if (cleanedUp) {
          instance.dispose();
          return;
        }


        // do something with the instance of CreativeEditor SDK (e.g., populate
        // the asset library with default / demo asset sources)
        await Promise.all([
          instance.addDefaultAssetSources(),
          instance.addDemoAssetSources({ sceneMode: 'Design' }),
        ]);


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


        // store the CESDK instance in state
        setCesdk(instance);
      },
    );


    // cleanup function to dispose of the CESDK instance when the component unmounts
    const cleanup = () => {
      // clear the local state and dispose of the CS.SDK instance (if it has been assigned)
      cleanedUp = true;
      instance?.dispose();
      setCesdk(null);
    };


    // to ensure cleanup runs when the component unmounts
    return cleanup;
  }, [cesdk_container]);


  return (
    // the container HTML element where the CESDK editor will be mounted
    <div
      ref={cesdk_container}
      style={{ width: '100vw', height: '100vh' }}
    ></div>
  );
}

Your custom Creative Editor component must be marked with "use client" at the top. That’s required because the component uses React hooks and JavaScript logic to initialize CreativeEditor SDK.

Step 4: Create a Client-Side Editor Component

CreativeEditor SDK depends on browser-only features like document and dynamic DOM manipulation. So, CreativeEditorSDKComponent must only be rendered on the client side— without any server-side rendering (SSR). To achieve that, you need to import it dynamically using Next.js’s dynamic import with ssr: false.

To avoid repeating the dynamic import statement wherever you use CreativeEditorSDKComponent, create a CreativeEditorSDKNoSSR.js file inside the components/ directory. This new component will export CreativeEditorSDKComponent, imported using a dynamic import with SSR disabled:

'use client';


import dynamic from 'next/dynamic';


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


export default CreativeEditorSDKNoSSR;

Step 5: Use the Creative Editor Client-Side Component

Import CreativeEditorSDKNoSSR in your page.js file:

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

Then, you can render the client-side component inside your JSX like this:

<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 6: Run the Next.js Project Locally

Run your project locally by starting the development server powered by Turbopack using the following command:

Terminal window
npm run dev

By default, the Next.js app will be available 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 error only occurs during development due to how the local Turbopack development server works and how CreativeEditor SDK dynamically manipulates the DOM to mount the editor in the browser. In production, this error won’t appear, so you can either safely ignore it or suppress it with suppressHydrationWarning.

❌ Error: Identifier 'CreativeEditorSDK' has already been declared

  • Ensure that the name of your custom creative editor component function in CreativeEditorSDK.js isn’t CreativeEditorSDK, as that conflicts with the class imported from @cesdk/cesdk-js.

❌ Error: document is not defined

  • Make sure that CreativeEditorSDKComponent is imported dynamically via the CreativeEditorSDKNoSSR component, using next/dynamic with ssr: false to disable server-side rendering.

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

  • Verify that you’ve correctly installed CE.SDK using 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

  • Double-check that your license key is valid and hasn’t expired.

❌ Editor does not load

  • Check the browser console for any errors.
  • Make sure that your component paths and imports are correct.

Next Steps

Congratulations! You’ve successfully integrated CE.SDK into a new Next.js project. Now take a moment to explore what the SDK offers, and move on to the next steps whenever you’re ready: