# Integrating CKEditor 5 with Next.js from npm

You can integrate CKEditor 5 with [Next.js](https://nextjs.org/) using the official [CKEditor 5 React component](react/react-default-npm.md) 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](https://nextjs.org/docs/app/api-reference/create-next-app).

> **Create your own CKEditor 5**
>
> Check out our interactive Builder to quickly get a taste of CKEditor 5. It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs.
>
> * editor type,
> * the features you need,
> * the preferred framework (React, Angular, Vue or Vanilla JS),
> * the preferred distribution method.
>
> You get ready-to-use code tailored to your needs!
>
> [Check out our interactive Builder](https://builder.ckeditor.com/?redirect=docs)

<a id="setting-up-the-project">

## 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](https://nextjs.org/docs/app/api-reference/create-next-app) to learn more.

<a id="installing-from-npm">

## 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.

```bash
npm install ckeditor5 ckeditor5-premium-features
```

Next.js is based on React, so install the [CKEditor 5 WYSIWYG editor component for React](https://www.npmjs.com/package/@ckeditor/ckeditor5-react), too:

```bash
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.

> **Note**
>
> Starting from version 44.0.0, the `licenseKey` property is required to use the editor. If you use a self-hosted editor from npm:
>
> * You must either comply with the GPL or
> * Obtain a license for [self-hosting distribution](../../licensing/license-key-and-activation.md).
>
> You can set up [a free trial](https://portal.ckeditor.com/checkout?plan=free) to test the editor and evaluate the self-hosting.

```jsx
// 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.

```jsx
// 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.

```jsx
// 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.

> **Warning**
>
> If you have trouble seeing the editor, remember that the Next.js project ships with CSS files that can interfere with the editor. You can remove them or add your styling.

Also, pay attention to the import path – this guide uses the [default import alias](https://nextjs.org/docs/app/building-your-application/configuring/absolute-imports-and-module-aliases) (@). If you did not configure it, change the path appropriately.

> **Note**
>
> In the example above, we only used basic features of the `<CKEditor>` component. To learn more about additional features and configuration options – including inline editors and the multi-root variant – refer to the [React integration guide](react/react-default-npm.md).

<a id="how-to">

## How to?

<a id="using-the-editor-with-collaboration-plugins">

### 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](https://github.com/ckeditor/ckeditor5-collaboration-samples/tree/master/real-time-collaboration-for-next)
* [CKEditor 5 with offline comments, track changes and revision history features](https://github.com/ckeditor/ckeditor5-collaboration-samples/tree/master/collaboration-for-next)

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

<a id="next-steps">

## Next steps

* See how to manipulate the editor’s data in the [Getting and setting data](../../setup/getting-and-setting-data.md) guide.
* Refer to further guides in the [setup section](../../setup/configuration.md) to see how to customize your editor further.
* Check the [features category](../../../features/index.md) to learn more about individual features.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../../llms.txt)