Search
Loading...
Skip to content

New 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 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 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"
    />
  );
}

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: