ReactQuill with NextJS

Hey everyone, just wanted to share this with you. So I've been trying to find rich editors that were compatible with NextJS. Couldn't find any but I found a way to get ReactQuill working.

Import dynamic

import dynamic from 'react/dynamic'

After that import ReactQuill using dynamic

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

Now you can easily use it!
Example:

import { useState } from "react";
import dynamic from 'next/dynamic';
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
import 'react-quill/dist/quill.snow.css';

function App() {
    const [value, setValue] = useState('')
    return(
       <ReactQuill value={value} onChange={setValue}/>
    )
}

export default App;

I hope this helps 😊

Comments

[Munir Ali Mohammed]

Arigato Guzaimas

[Amresh Prasad Sinha]

Thanks a lot! You saved my time!

[CY]

Thank you! This is very helpful.

[Umesh Chaudhary]

How do you import ReactQuill modules (quill-image-resizing -module) on the dynamic imports ?

[tidianeb5]

thanks you ! this help me lot

[Karthikeyan Dharmalingam]

Server Error
TypeError: Quill.register is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window.

dev-to-uploads.s3.amazonaws.com/up...

dev-to-uploads.s3.amazonaws.com/up...

[A7U]

Can you show me how you imported React-quill?

[reachmeatanytime7]

Thank you!! This helped me :)

[Yoza Wiratama]

can not use ref for image upload handler

[Lukman Isiaka]

Thank you very much

[Ankit kumar]

toolbar is appearing twice. i don't know how to fix it.. i am using quill inside form element