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;