Can I use this module in nextjs?

[suCozy]

My code is as below, but I want to try using the image control library I'd like to ask for advice on what to do if possible

import {
  Dispatch,
  LegacyRef,
  memo,
  SetStateAction,
  useMemo,
  useRef,
} from 'react';

import dynamic from 'next/dynamic';
import ReactQuill, {  ReactQuillProps } from 'react-quill';
import Swal from 'sweetalert2';

import { quillDefaultModule } from '@constants/quill.constant';
import { getMetaData } from '@http/commons.http';
import { uploadFile } from '@http/file.http';

interface IQuillEditor extends ReactQuillProps {
  forwardedRef: LegacyRef<ReactQuill>;
}

const QuillNoSSRWrapper = dynamic(
  async () => {
    const { default: RQ } = await import('react-quill');
    // eslint-disable-next-line react/display-name
    return function editor({ forwardedRef, ...props }: IQuillEditor) {
      return <RQ ref={forwardedRef} {...props} />;
    };
  },
  { ssr: false }
);

function Editor({
  setContent,
  content,
}: {
  setContent: Dispatch<SetStateAction<string>>;
  content: string;
}) {
  const quill = useRef<ReactQuill>(null);

  const modules = useMemo(
    () => ({
      ...quillDefaultModule,
      toolbar: {
        ...quillDefaultModule.toolbar,
        handlers: {
          image: async () => imageHandler(),
        },
        onPaste() {
          console.log('asdfasdf');
        },
      },
    }),
    []
  );

  const imageHandler = () => {
    const input = document.createElement('input');

    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/png, image/jpeg, .gif');

    document.body.appendChild(input);

    input.click();

    input.onchange = async () => {
      try {
        const file = input.files && input.files[0];

        const data = await uploadFile({ file });

        if (quill.current) {
          const range = quill.current.getEditorSelection();

          if (range) {
            quill.current
              .getEditor()
              .insertEmbed(range.index, 'image', data.data.Location);
            quill.current.getEditor().insertText(range.index + 1, ' ');


            quill.current
              .getEditor()
              .setSelection({ index: range.index + 1, length: 0 });
          }

        }
      } catch (error) {
        alert('error');
      }
    };
  };

  return (
    <QuillNoSSRWrapper
      forwardedRef={quill}
      modules={modules}
      onChange={setContent}
      theme="snow"
      defaultValue={content}
      scrollingContainer="html"
    />
  );
}

export default memo(Editor);