Integrate CKEditor 5 with Next.js

Next.js is a React meta-framework that helps create full-stack web applications. It offers different rendering strategies like server-side rendering (SSR), client-side rendering (CSR), or static site generation (SSG). Additionally, it provides file-based routing, automatic code splitting, and other handy features out of the box.

Next.js 13 introduced a new App Router as an alternative to the previous Pages Router. App Router supports server components and is more server-centric than Pages Router, which is client-side oriented.

CKEditor 5 does not support server-side rendering yet, but you can integrate it with the Next.js framework. In this guide, you will add the editor to a Next.js project using both routing paradigms. For this purpose, you will need Next.js CLI, and the official CKEditor 5 React component.

# Setting up the project

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.

# Installing from npm

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' // only in App Router

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

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

function CustomEditor() {
    return (
        <CKEditor
            editor={ ClassicEditor }
            config={ {
                toolbar: {
                    items: [ 'undo', 'redo', '|', 'bold', 'italic' ],
                },
                plugins: [
                    Bold, Essentials, Italic, Mention, Paragraph, SlashCommand, Undo
                ],
                licenseKey: '<YOUR_LICENSE_KEY>',
                mention: { 
                    // Mention configuration
                },
                initialData: '<p>Hello from CKEditor 5 in React!</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.

CKEditor 5 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.

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

import dynamic from 'next/dynamic';

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

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

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.

# How to?

# Using the editor with collaboration plugins

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.