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 shows you how to set up a new Next.js project, and integrate the CreativeEditor SDK (CE.SDK) using a reusable client-only component. You’ll learn how to install CE.SDK via npm, turn off server-side rendering (SSR) for the editor, and embed it cleanly into your app, ready for customization.

Who Is This Guide For?#

This guide is for developers who:

  • Have basic experience with Next.js.
  • Want to start a new Next.js project.
  • Want to build a page in their app 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.
  • Create 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#

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

The CLI prompts you with a few questions. Choose:

  • Default options.
  • JavaScript as programming language instead of TypeScript.

The CLI creates a new Next.js project 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

Install dependencies with:

Terminal window
npm install

Step 2: Install CE.SDK#

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

Terminal window
npm install @cesdk/cesdk-js

Step 3: Run the Next.js Project Locally#

Run your project locally by starting the development server with:

Terminal window
npm run dev

Navigate to http://localhost:3000/ to see the starter Next.js app in your browser.

Step 4: Create Your Creative Editor Component#

In your new codebase, 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:

CreativeEditorSDK.js
'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
};


// 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', withUploadAssetSources: true }),
  ]);


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


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

Step 5: Create a Client-Side Editor Component#

The CreativeEditorSDKComponent only runs in the browser. Here’s what you need to know:

  • Never render CreativeEditorSDKComponent on the server (SSR): CreativeEditor SDK relies on browser-only features like document and dynamic DOM manipulation.
  • Import it dynamically using Next.js’s dynamic import with ssr: false.

To avoid repeating the dynamic import statement wherever you use CreativeEditorSDKComponent:

  1. Create a CreativeEditorSDKNoSSR.js file inside the components/ directory.
  2. Add 'use client'; at the top of the file:
CreativeEditorSDKNoSSR.js
'use client';
  1. Import CreativeEditorSDKComponent in this new component using a dynamic import with SSR off:
CreativeEditorSDKNoSSR.js
import dynamic from 'next/dynamic';


const CreativeEditorSDKNoSSR = dynamic(() => import('./CreativeEditorSDK'), {
  ssr: false,
});
  1. Export CreativeEditorSDKComponent.
CreativeEditorSDKNoSSR.js
export default CreativeEditorSDKNoSSR;

Final components/CreativeEditorSDKNoSSR.js file should contain:

CreativeEditorSDKNoSSR.js
'use client';


import dynamic from 'next/dynamic';


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


export default CreativeEditorSDKNoSSR;

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

Import CreativeEditorSDKNoSSR in your page.js file:

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

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

page.js
<CreativeEditorSDK />

Final page.js contains:

page.js
// Other imports...
import { default as CreativeEditorSDK } from './components/CreativeEditorSDKNoSSR';


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

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 the CreativeEditorSDKNoSSR component imports the CreativeEditorSDKComponent dynamically, using next/dynamic with ssr: false to turn off 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 doesn’t 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: