Using with NextJS

KendoReact enables you to add KendoReact components to NextJS projects and utilize server-side rendering.

Prerequisites

• React 18 (or a version >= 16.8.x)

• NodeJS v18.17.1 (or a version >= 14). Use the node -v command to check your node versions.

• A bash terminal of your choice, for example, the one available in the Visual Studio Code console.

Create a NextJS Project using the App router

After running npx create-next-app, you will be prompted with a couple of options that you can choose based on your preference. If you want to have routing with the app directory, make sure to choose Yes for that option:

Copy Codenpx create-next-app
What is your project named? » my-app
Would you like to use TypeScript? » No / Yes
Would you like to use ESLint? » No / Yes
Would you like to use Tailwind CSS? » No / Yes
Would you like to use `src/` directory? » No / Yes
Would you like to use App Router? (recommended) » No / Yes (choose YES)
Would you like to customize the default import alias? » No / Yes
cd my-app

Install the Editor Package

All KendoReact packages are distributed through npm and offer a similar installation experience. The dependencies needed for the installation of each component package are listed in a dedicated Getting Started article on the component package level, for example, Getting Started with the React Editor.

To use the KendoReact Editor in your NextJS project, first, install and import the following KendoReact components by using NPM or YARN.

Copy Codenpm install --save @progress/kendo-react-editor @progress/kendo-react-intl @progress/kendo-react-buttons @progress/kendo-react-dropdowns @progress/kendo-react-dialogs @progress/kendo-react-inputs @progress/kendo-react-layout @progress/kendo-react-popup @progress/kendo-react-pdf @progress/kendo-react-progressbars @progress/kendo-drawing @progress/kendo-licensing @progress/kendo-svg-icons @progress/kendo-react-treeview

Import the Editor Component

After installing the needed packages, you can import the Editor component in the NextJS App. If you want to add the Editor to the main page that is first loaded, you can directly import it in the initial page.js file of the project.

However, if you want the Editor to be present in a separate route, you can create a separate folder that contains a page.js file in the app directory. For example, you can import the Editor and EditorTools components in app/editor/page.js. In this case, the URL that navigates to the Editor will be localhost:3000/editor.

Copy Code// ES2015 module syntax
import { Editor, EditorTools } from '@progress/kendo-react-editor';

Use the Editor Component

1. Add the use client directive at the top of the file. This is required when using client components in NextJS with the app router. For more information on this matter, check this article.

2. Define the editor tools that you want to enable. The EditorTools provide diverse built-in user-interface tools that help users modify the content.

   Copy Code   const {
      Bold,
      Italic,
      Underline,
      AlignLeft,
      AlignRight,
      AlignCenter,
      Indent,
      Outdent,
      OrderedList,
      UnorderedList,
      Undo,
      Redo,
      Link,
      Unlink
      } = EditorTools;

3. Add the component's markup to the app/editor/page.js file in your project and set the tools. Optionally, configure the height of the Editor component.

   Copy Code return (
        <Editor tools={[[Bold, Italic, Underline], [Undo, Redo], [Link, Unlink], [AlignLeft, AlignCenter, AlignRight], [OrderedList, UnorderedList, Indent, Outdent]]} contentStyle={{
        height: 320
        }} defaultContent={"<p>Hello, NextJS!</p>"} />
    )

4. To style the Editor, install and import the Default theme, which is one of the four beautiful themes for KendoReact.

   3.1. Install the Default theme package.

   Copy Codenpm install --save @progress/kendo-theme-default

   3.2. Import the CSS file from the package in the main layout.js file.

   Copy Codeimport '@progress/kendo-theme-default/dist/all.css';

5. Start a development server by typing the following command in the root folder of your project:

   Copy Codenpm run dev

6. Navigate to http://localhost:3000 to see the KendoReact Editor component on the page.

Create a NextJS Project using the Pages router

You can set up a Next.js project that uses the pages router by using the following command.

Copy Codenpx create-next-app my-app --no-app
cd my-app

The only difference for adding the Editor in this case is that the Editor and EditorTools components should be imported pages/index.js file.

In addition, the component's markup should be added to the pages/index.js file and the @progress/kendo-theme-default/dist/all.css import should be added in src/App.js.

Sample Project

You can find a complete and more complex NextJS project integrated with KendoReact in the kendo-react-nextjs GitHub repository. It contains an example of both the KendoReact Grid and Drawer components using the app router.

Activating Your License Key

Using any of the UI components in the KendoReact library requires either a commercial license key or an active trial license key.

Since version 5.16.0 (26 July 2023) of KendoReact, a missing license causes a watermark to appear over selected components. For more information, see the Invalid License section.

To experience the full potential of the KendoReact components, follow the steps below to activate your license and hide the invalid/non-activated license attributes:

1. Delete the .next folder that is generated when running npm run dev. This is because it stores the page cache and will still show the watermark and license activation warnings in the console if not deleted.
2. Follow the instructions in the My License Page article.

Suggested Links

• NextJS
• Sample Project on NextJS Integration
• Integration with NextJS