HelpBot Assistant

How can I help you?

Getting started with React Document Editor in Next.js

13 Feb 20265 minutes to read

This section provides a step-by-step guide for setting up a Next.js application and integrating the Syncfusion® React Document Editor component.

What is Next.js?

Next.js is a React framework that makes it easy to build fast, SEO-friendly, and user-friendly web applications. It provides features such as server-side rendering, automatic code splitting, routing, and API routes, making it an excellent choice for building modern web applications.

Prerequisites

Before getting started with the Next.js application, ensure the following prerequisites are met:

  • Node.js 16.8 or later.

  • The application is compatible with macOS, Windows, and Linux operating systems.

Create a Next.js application

To create a new Next.js application, use one of the commands that are specific to either NPM or Yarn.

npx create-next-app@latest
yarn create next-app

Using one of the above commands will prompt you to configure additional settings for the project:

Define the project name

Specify the name of the project directly. In this example, the project is named ej2-next js-documenteditor:

√ What is your project named? » ej2-nextjs-documenteditor

Select the required packages

Choose the following configuration options:

√ What is your project named? ... ej2-nextjs-documenteditor
√ 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`
√ Would you like to customize the default import alias? ... `No` / Yes
Creating a new Next.js app in D:\ej2-nextjs-documenteditor.

Once the above steps are complete, navigate to the project directory using the following command:

cd ej2-nextjs-documenteditor

The application is ready to run with default settings. The next steps will add the Syncfusion Document Editor component to the project.

Install Syncfusion® React packages

Syncfusion® React component packages are available at npmjs.com. To use Syncfusion® React components in the project, install the corresponding npm package.

Here, the React Document Editor component is used in the project. To install the React Document Editor component, use the following command:

npm install @syncfusion/ej2-react-documenteditor --save
yarn add @syncfusion/ej2-react-documenteditor

Import Syncfusion® CSS styles

Syncfusion® React components come with built-in themes, which are available in the installed packages. It’s easy to adapt the Syncfusion® React components to match the style of your application by referring to one of the built-in themes.

Import the Material theme into the src/app/globals.css file and removed the existing styles in that file, as shown below:

@import '../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import "../../node_modules/@syncfusion/ej2-react-documenteditor/styles/material.css";

To learn more about built-in themes and CSS reference for individual components, refer to the themes section.

Add Syncfusion® React Document Editor component

Follow these steps to add the React Document Editor component to the Next.js project:

Import the Document Editor component

Before adding the Document Editor component to your markup, import the Document Editor component in the src/app/page.tsx file:

'use client'
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';

Define the Document Editor component

Define the Document Editor component in the src/app/page.tsx file, as shown below:

'use client'
import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';

DocumentEditorContainerComponent.Inject(Toolbar);

export default function Home() {
  return (
    <>
      <h2>Syncfusion React Document Editor Component</h2>
      <DocumentEditorContainerComponent 
        id="container" 
        height={'590px'} 
        serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" 
        enableToolbar={true}>
      </DocumentEditorContainerComponent>
    </>
  )
}

The Web API hosted link https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/ used in the Document Editor’s serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, host your own web service with the required server configurations. Refer to the GitHub Web Service example or use the Docker image for hosting your own web service.

Run the application

To run the application, use the following command:

npm run dev
yarn run dev

To learn more about the functionality of the Document Editor component, refer to the documentation.

View the NEXT.js Document Editor sample in the GitHub repository.