DEV Community

loading...

ReactQuill with NextJS

a7u profile image A7U ・1 min read

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 (2)

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?

Forem Open with the Forem app