Search
Loading...
Skip to content

Clone GitHub Next.js Project

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

This guide will show you how to download and run a prebuilt CreativeEditor SDK (CE.SDK) integration project using Next.js from GitHub. It’s the quickest way to get started with CE.SDK—no need to configure everything from the ground up.

Who Is This Guide For?#

This guide is perfect for developers who:

  • Want to explore CE.SDK without the need to configure a custom setup.
  • Prefer using a ready-to-go Next.js project.
  • Have experience with Git and Node.js for setting up local development environments.

What You’ll Achieve#

  • Clone the CE.SDK Next.js integration project from GitHub.
  • Set up the project by installing the necessary dependencies and running it locally.
  • Open a fully functional image and video editor right in your browser.

Prerequisites#

Before you begin, ensure you have the following tools:

  • Git: Used to clone the project from GitHub. Download Git.
  • The latest LTS version of Node.js and npm: Essential for installing dependencies and running the local development server. Download Node.js.
  • A valid CE.SDK license key (Get a free trial).

Step 1: Clone the GitHub Repository#

Clone the CE.SDK examples repository from GitHub:

Terminal window
git clone https://github.com/imgly/cesdk-web-examples.git

Then navigate to the Next.js integration folder:

Terminal window
cd cesdk-web-examples/integrate-with-next-js

Step 2: Install the Dependencies#

Install the required dependencies using npm:

Terminal window
npm install

This will download and install all the packages listed in the package.json file.

Step 3: Add Your License Key#

Open the CE.SDK editor component file (located at /app/components/CreativeEditorSDK.js), and replace the placeholder license key with your actual one:

const config = {
  license: '<YOUR_CE_SDK_LICENSE>', // replace this with your CE.SDL license key
  // ...
};

Step 4: Run the Project#

Start the local development server with:

Terminal window
npm run dev

The Next.js app will be available at your localhost on http://localhost:3000/. Open the URL in your browser to see the creative editor in action.

Troubleshooting & Common Issues#

❌ Error: 'next' is not recognized as an internal or external command, operable program or batch file.

  • Make sure you’ve run npm install before executing npm run dev.

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

  • Verify that your CE.SDK license key is correct, hasn’t expired, and is properly added to the config object.

❌ Issue: The editor isn’t showing up

  • Check the terminal for any server-side errors.
  • Inspect the browser console for specific error messages that can help identify the issue.

Next Steps#

Congratulations! You’ve successfully set up CE.SDK with Next.js. When you’re ready, explore the SDK further and move on to the next steps: