Introduction
In this tutorial I walk you through on how to integrate a Quill rich text editor into a Next.js application. I will start from creating a new Next.js project and end it with configuring Quills with the custom functionalities. After you have completed this tutorial, you will have a fully working Quill editor integrated into your Next.js application.
What is Next.js
Next.js is a popular React-based framework that developers uses to speed up their software development inorder to create a high speed web apps. Nextjs supports server-side rendering, static site generation, and incremental static regeneration. This is part of its abstraction, which helps in better performance and search engine optimization of web applications. Next.js gives developers an unrestricted way to build React applications with flexible routing, API integration, and more.
You can also see the list of all Nextjs text editors
What is Quill?
Quill is a text editor that is free for any developer to use without putting any money. Quill is an open-source, and customizable WYSIWYG text editor. It provides powerful editing capabilities for text formats such as bold, italics, lists, images, links, etc. Quill is not hard because it is very easy to use but it is also highly customizable through custom integrations with modules. It is also widely accepted across web applications to have text editor capabilities.
Setting Up Next.js Project
We are going to install Quill text editor in our application, start a new Next.js project.
- Install Node.js and npm/yarn: You can install any of the packages either nom or yarn. Make sure you have both Node.js and npm or yarn on your machine for this.
- Initiate new Next.js application: Open the terminal and run the command below to initiate a new Next.js application:
cd quill-nextjs-example
npx create-next-app quill-nextjs-example
# or
yarn create next-app quill-nextjs-example
3. Navigate to the project directory
cd quill-nextjs-example
4. Run the development server
npm run dev
# or
yarn dev
After you completed the steps above your Next.js application will now start to run at this host http://localhost:3000.
Integrating Quill with Nextjs
We need React wrapper to continue with our Quill Integration. install it along with its React wrapper, react-quill. The procedure below is the guide for the installation.
1.Create a new component for the Quill editor: Now that we have created our Nextjs application recall that we need to install quill text editor. We will Create a new file called QuillEditor.js in the components directory.
// components/QuillEditor.js
import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css'; // Import Quill's styles
const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });
const QuillEditor = () => {
const [value, setValue] = React.useState('');
return (
<div>
<ReactQuill theme="snow" value={value} onChange={setValue} />
</div>
);
};
export default QuillEditor;
Let me explain what happened here
In the code above we made a dynamic import to import ReactQuill. This ensure it’s only loaded on the client side .We also define the Quill Editor component with a state variable value to manage the editor’s content.
2.Use the Quill Editor component in your application
Go to your index.js file folder in the pages directory and import your Quill Editor component.
// pages/index.js
import Head from 'next/head';
import QuillEditor from '../components/QuillEditor';
export default function Home() {
return (
<div>
<Head>
<title>Quill Editor in Next.js</title>
</Head>
<main>
<h1>Integrating Quill with Next.js</h1>
<QuillEditor />
</main>
</div>
);
}
3. Run your application: Let’s text the application by restarting it and open your development server.
npm run dev
# or
yarn dev
Now when you visit http://localhost:3000 in your preferred browser, and you must see the Quill editor integrated into your Next.js application.
Configuring Quill Toolbar and Modules
We need to customize the Quill editor’s toolbar and other of it’s functionality. Let’s start by defining a custom configuration. Let us Customize the toolbar and Update your QuillEditor.js component to include a custom toolbar.
// components/QuillEditor.js
import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';
const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });
const modules = {
toolbar: [
[{ header: '1' }, { header: '2' }, { font: [] }],
[{ size: [] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{ list: 'ordered' }, { list: 'bullet' }],
['link', 'image'],
['clean'],
],
};
const formats = [
'header',
'font',
'size',
'bold',
'italic',
'underline',
'strike',
'blockquote',
'list',
'bullet',
'link',
'image',
];
const QuillEditor = () => {
const [value, setValue] = React.useState('');
return (
<div>
<ReactQuill
theme="snow"
value={value}
onChange={setValue}
modules={modules}
formats={formats}
/>
</div>
);
};
export default QuillEditor;Change events: It Update your QuillEditor.js component so that you can log the changes to the console.
// components/QuillEditor.js
import dynamic from 'next/dynamic';
import 'react-quill/dist/quill.snow.css';
const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });
const modules = {
toolbar: [
[{ header: '1' }, { header: '2' }, { font: [] }],
[{ size: [] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{ list: 'ordered' }, { list: 'bullet' }],
['link', 'image'],
['clean'],
],
};
const formats = [
'header',
'font',
'size',
'bold',
'italic',
'underline',
'strike',
'blockquote',
'list',
'bullet',
'link',
'image',
];
const QuillEditor = () => {
const [value, setValue] = React.useState('');
const handleChange = (content, delta, source, editor) => {
setValue(content);
console.log(editor.getHTML()); // Get HTML content
console.log(editor.getText()); // Get plain text content
};
return (
<div>
<ReactQuill
theme="snow"
value={value}
onChange={handleChange}
modules={modules}
formats={formats}
/>
</div>
);
};
export default QuillEditor;
Explanation:
- The
handleChangefunction above handles the change event. It also updates thevaluestate and logging the editor’s HTML and plain text content.
lServer-Side Rendering Considerations
Since Quill is a client-side library, make sure you need to ensure it only loads on the client side to avoid SSR issues.
Modify the default Quill styles:
- You can override the default Quill styles by adding custom CSS in your project’s stylesheets.
Dynamic import with ssr: false: As shown in our QuillEditor.js example, when you use dynamic import with ssr false prevents the editor from being rendered on the server side. this is to avoide SSR issues.
/* styles/globals.css */
.ql-editor {
min-height: 300px;
font-size: 16px;
}
Using CSS-in-JS libraries:
- If you’re using a CSS-in-JS library like
styled-componentsorEmotion, you can style the editor directly within your component file.
Let me explain what happened here .
We first defined the modules object to customize the toolbar with headers, font sizes, bold, italic, underline options, and more of it . Then we formats it in array that specifies the formats that are allowed in this Quill editor.
Conclusion of integrating Quill editor Nextjs
Congratulations as You have successfully integrated the Quill rich text editor into your nextjs application.
What you have learnt so far are : You’ve learned to set up a Next.js project, install and configure Quill, handle editor events, and manage server-side rendering considerations. This is the beginning of every good project congratulations as you have successfully integrated your project .
