NextJS setup

Redactor can work in NextJS, just import the editor and make a React component:

// RedactorJS.js
import React, { useEffect, useRef } from 'react';
import './redactor.min.css';
import Redactor from './redactor.usm.min.js';
import './emoji.js';

const RedactorJS = ({ opts }) => {
  const textAreaRef = useRef(null);

  useEffect(() => {
    let editor;
    let opts = {
        plugins: ['emoji'],
        content: 'Hello World!'
    };
    if (textAreaRef.current) {
      editor = Redactor(textAreaRef.current, opts);
    }

    return () => {
      if (editor) {
        editor.destroy();
      }
    };
  }, [opts]);

  return <textarea ref={textAreaRef}></textarea>;
};

export default RedactorJS;

Now you can import the component into the page like this:

// page.js
'use client'

import RedactorJS from '../components/RedactorJS.js';

export default () => (
  <div>
    <RedactorJS />
  </div>
);