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>
);

Note

Please make sure that the path to the component is set correctly.

Dynamic import

Redactor uses a window object because of this window detection error may occur when rendering NextJs on the server. In this case you can connect the editor dynamically with rendering only on the client side:


// page.js
'use client'

import dynamic from "next/dynamic";

const RedactorJS = dynamic(() => import("../components/RedactorJS"), {
  ssr: false,
});

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