Skip to content

next-js.md

Latest commit

 

History

History
135 lines (96 loc) · 5.89 KB

next-js.md

File metadata and controls

135 lines (96 loc) · 5.89 KB
Raw
menu-title Next.js
meta-title Using the CKEditor 5 rich-text editor with Next.js from CDN | CKEditor 5 Documentation
meta-description Integrate the CKEditor 5 WYSIWYG editor with the Next.js framework using both routing strategies (App Router or Pages Router) and CDN.
category cloud
order 40
modified_at 2023-11-14

Integrating CKEditor 5 with Next.js from CDN

You can integrate CKEditor 5 with Next.js using the official {@link getting-started/integrations-cdn/react-default-cdn 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.

{@snippet getting-started/use-builder}

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.

Using from CDN

To use our Cloud CDN services, [create a free account](https://portal.ckeditor.com/checkout?plan=free). Learn more about {@link getting-started/licensing/license-key-and-activation license key activation}.

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

npm install @ckeditor/ckeditor5-react

You will use the installed dependency 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 example below shows how to use the component with both open-source and premium plugins.

The 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 the file, above your imports. You do not need the directive if you use the Pages Router.

In the below example, the useCKEditorCloud hook is used to load the editor code and plugins from CDN. To use premium plugins, set the premium property to true and provide your license key in the configuration. For more information about the useCKEditorCloud helper, see the {@link getting-started/setup/loading-cdn-resources Loading CDN resources} guide.

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

import React from 'react';
import { CKEditor, useCKEditorCloud } from '@ckeditor/ckeditor5-react';

const CustomEditor = () => {
	const cloud = useCKEditorCloud( {
		version: '{@var ckeditor5-version}',
		premium: true
	} );

	if ( cloud.status === 'error' ) {
		return <div>Error!</div>;
	}

	if ( cloud.status === 'loading' ) {
		return <div>Loading...</div>;
	}

	const {
		ClassicEditor,
		Essentials,
		Paragraph,
		Bold,
		Italic
	} = cloud.CKEditor;

	const { FormatPainter } = cloud.CKEditorPremiumFeatures;

	return (
		<CKEditor
			editor={ ClassicEditor }
			data={ '<p>Hello world!</p>' }
			config={ {
				licenseKey: '<YOUR_LICENSE_KEY>',
				plugins: [ Essentials, Paragraph, Bold, Italic, FormatPainter ],
				toolbar: [ 'undo', 'redo', '|', 'bold', 'italic', '|', 'formatPainter' ]
			} }
		/>
	);
};

export default CustomEditor;

The CustomEditor component is ready to be used inside a page. The page's directory will differ depending on the selected 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.

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 (@). If you did not configure it, change the path

In the example above, we only used basic features of the `` component. To learn more about additional features and configuration options – including inline editors and the multi-root variant – refer to the {@link getting-started/integrations-cdn/react-default-cdn React integration guide}.

Next steps

  • See how to manipulate the editor's data in the {@link getting-started/setup/getting-and-setting-data Getting and setting data} guide.
  • Refer to further guides in the {@link getting-started/setup/configuration setup section} to see how to customize your editor further.
  • Check the {@link features/index features category} to learn more about individual features.