Using editorjs in Nextjs 15 (TypeScript)

editorjs is a fancy blocks editor. However, I had some troubles using it in my nextjs app. It is a client component (apparently) but initializing it requires being a bit aware of what editorjs itself is exporting

editor.tsx

"use client";

import { useEffect, useState } from "react";
import dynamic from "next/dynamic";

// Dynamically import and use createReactEditorJS to create the component
const ReactEditorJS = dynamic(
  () =>
    import("react-editor-js").then((mod) => {
      const { createReactEditorJS } = mod;
      return createReactEditorJS(); // Call the function to get the component
    }),
  { ssr: false } // Disable SSR for the editor
);

const EditorPage = () => {
  const [editorReady, setEditorReady] = useState(false);

  useEffect(() => {
    setEditorReady(true); // Set editor to be ready after the client-side mount
  }, []);

  if (!editorReady) {
    return <div>Loading Editor...</div>; // Placeholder until the editor is ready
  }

  return (
    <div>
      <h1>EditorJS in Next.js</h1>
      <ReactEditorJS />{" "}
      {/* Now ReactEditorJS should be a valid React component */}
    </div>
  );
};

export default EditorPage;

Using editorjs in Nextjs 15 (TypeScript)

Leave a Reply Cancel reply