Integrating CKEditor 5 with Next.js from npm

You can integrate CKEditor 5 with Next.js using the official CKEditor 5 React component in projects using either the App Router or the Pages Router. Because CKEditor 5 relies on browser APIs, it cannot be pre-rendered with server-side rendering (SSR) or static site generation (SSG); instead, you load it on the client side (client-side rendering, CSR). You will need a Next.js project, which you can create with the Next.js CLI.

This guide assumes you already have a Next project. To create such a project, you can use CLI like create-next-app. Refer to the Next.js documentation to learn more.

First, install the CKEditor 5 packages:

• ckeditor5 – package with open-source plugins and features.
• ckeditor5-premium-features – package with premium plugins and features.

Depending on your configuration and chosen plugins, you may need to install the first or both packages.

npm install ckeditor5 ckeditor5-premium-features

Next.js is based on React, so install the CKEditor 5 WYSIWYG editor component for React, too:

npm install @ckeditor/ckeditor5-react

Next, you will use the installed dependencies in a React component. Create a new component in the components directory, for example, components/custom-editor.js. Inside the component file, import all necessary dependencies. Then, create a functional component that returns the CKEditor 5 React component. The below example shows how to use the component with open-source and premium plugins.

App Router, by default, uses server components. It means you need to mark a component as client-side explicitly. You can achieve that by using the 'use client' directive at the top of a file, above your imports. You do not need the directive if you use the Pages Router.

// components/custom-editor.js
'use client' // Required only in App Router.

import { CKEditor } from '@ckeditor/ckeditor5-react';
import { ClassicEditor, Essentials, Paragraph, Bold, Italic } from 'ckeditor5';
import { FormatPainter } from 'ckeditor5-premium-features';

import 'ckeditor5/ckeditor5.css';
import 'ckeditor5-premium-features/ckeditor5-premium-features.css';

function CustomEditor() {
    return (
        <CKEditor
            editor={ ClassicEditor }
            config={ {
                licenseKey: '<YOUR_LICENSE_KEY>',
                plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ],
                toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ],
                root: {
                    initialData: '<p>Hello from CKEditor 5 in Next.js!</p>'
                }
            } }
        />
    );
}

export default CustomEditor;

The CustomEditor component is ready to be used inside a page. The page’s directory will differ depending on the chosen routing strategy.

The CKEditor 5 HTML editor is a client-side text editor and relies on the browser APIs, so you need to disable server-side rendering for our custom component. You can lazily load the component using the dynamic() function built into Next.js.

Prepare a wrapper for the CustomEditor component to load it on the client side.

// components/client-side-custom-editor.js
'use client' // Required only in App Router.

import dynamic from 'next/dynamic';

const ClientSideCustomEditor = dynamic( () => import( '@/components/custom-editor' ), { ssr: false } );

export default ClientSideCustomEditor;

And then use it in your application.

// app/page.js (App Router)
// pages/index.js (Pages Router)

import ClientSideCustomEditor from '@/components/client-side-custom-editor';

function Home() {
  return (
    <ClientSideCustomEditor />
  );
}

export default Home;

You can run your project now. If you chose create-next-app, type npm run dev to see your application in the browser.

Also, pay attention to the import path – this guide uses the default import alias (@). If you did not configure it, change the path appropriately.

We provide several ready-to-use integrations featuring collaborative editing in Next.js applications:

• CKEditor 5 with real-time collaboration features and revision history features
• CKEditor 5 with offline comments, track changes and revision history features

It is not mandatory to build applications on top of the above samples, however, they should help you get started.

• See how to manipulate the editor’s data in the Getting and setting data guide.
• Refer to further guides in the setup section to see how to customize your editor further.
• Check the features category to learn more about individual features.