DEV Community

A7U
A7U

Posted on

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'
Enter fullscreen mode Exit fullscreen mode

After that import ReactQuill using dynamic

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

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;
Enter fullscreen mode Exit fullscreen mode

I hope this helps 😊

Discussion (11)

Collapse
mamsheikh profile image
Munir Ali Mohammed

Arigato Guzaimas

Collapse
amreshsinha profile image
Amresh Prasad Sinha

Thanks a lot! You saved my time!

Collapse
cyishere profile image
CY

Thank you! This is very helpful.

Collapse
umschaudhary profile image
Umesh Chaudhary

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

Collapse
tidianeb5 profile image
tidianeb5

thanks you ! this help me lot

Collapse
karthikeyand profile image
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...

Collapse
a7u profile image
A7U Author

Can you show me how you imported React-quill?

Collapse
reacher profile image
reachmeatanytime7

Thank you!! This helped me :)

Collapse
yozawiratama profile image
Yoza Wiratama

can not use ref for image upload handler

Collapse
dellyson profile image
Lukman Isiaka

Thank you very much

Collapse
devankitkr profile image
Ankit kumar • Edited on

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