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

pic
Editor guide