How To Use The Quill Rich Text Editor in Your Next.Js App Router Project

So, in one of my many projects, the Quill Rich Text Editor is used, so in this short article, we will be learning how to use it in our next.js project. Let’s dive in.

Getting Started

You probably did this already, but just for the sake of helping the newcomers, you need to run npx create-next-app@latest and also, for quill, run npm i react-quill.

Note: The “i” in the “npm i react-quill” command stands for “install”.

Quill Editor In Use

Let’s now use the Quill Rich Text Editor in our next.js project.

We can start by importing the react-quill editor. Add these lines to your code:

'use client';
import React, { useState } from 'react';
import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';

const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });

Now, create and export a component for this page. Inside the component let’s declare a variable named value that uses useState:

const HomePage = () => {
  const [value, setValue] = useState('');
};

export default HomePage;

With us still working inside the component, we should add a modules object, which is used with the Quill Editor to customize it. Customize it with:

• Formats

• Headers

• Font

• Font Size

• Text Color

• Background Color

• Alignment

• Lists

• Code Blocks

• Indents

• Direction

• Image

• Video

• Links

And this is how you do that:

  const modules = {
    toolbar: [
     [{ header: [1, 2, 3, 4, 5, 6, false] }],
     ["bold", "italic", "underline", "strike", "blockquote", "script", "code"],
     [{ font: [] }, { size: [] }],
     [{ color: [] }, { background: [] }],
     [{ align: ["right", "center", "justify"] }],
     [{ list: "ordered" }, { list: "bullet" }],
     ["code-block", { indent: "-1" }, { indent: "+1" }, { direction: "rtl" }, { direction: "ltr" }],
     ["link", "image", "video"],
    ],
  };

To actually display the Text editor, we add:

  return (
    <main className="p-4">
        <ReactQuill value={value} onChange={setValue} modules={modules} placeholder="Start Typing Here..." />
    </main>
  );

See, I told you this article will be short. We learned how to use the Quill Rich Text Editor in our next.js app router projects. If you liked this article, follow me on Medium and subscribe to my newsletter.

Happy Coding!