How to implement Editor.js in nextjs?

[siddiquiaffan]

How to implement Editor.js in nextjs?

I tried to implement Editor.js in Nextjs but I failed to do it.

Here is my code.

import dynamic from 'next/dynamic';

const EditorJs = dynamic(import('react-editor-js'), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
});

const Editor = () => {
  return (
    <>
      <EditorJs />
    </>
  );
};

export default Editor;

Error:

Server Error
ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.

Can someone help me to implement EditorJs in NextJs?

Code: https://stackblitz.com/edit/nextjs-mckpbw?devtoolsheight=33&file=pages/editor.js

[widn-dev-io]

I am facing the same thing, have you got the solution?

[mqtik]

NextJS is running that server-side, that's why it doesn't work.

Throw a useEffect there, and set a state on mount. That'll only be executed client-side, and show when that state is true.

[wfmonster]

In my search I found this recent medium article on this.
https://medium.com/@sfazleyrabbi/next-js-editor-js-complete-setup-guide-7136c8bb694e

[Eloi-Perez]

In my search I found this recent medium article on this. https://medium.com/@sfazleyrabbi/next-js-editor-js-complete-setup-guide-7136c8bb694e

Thank you, that looks very helpful

[siddiquiaffan]

I am facing the same thing, have you got the solution?

Yep. Unfortunately the same code is working for me.

My code:

import dynamic from 'next/dynamic';

const EditorJs = dynamic(import('react-editor-js'), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
});

const Editor = () => {
  return (
    <>
      <EditorJs />
    </>
  );
};

export default Editor;

Stackblitz Link: https://stackblitz.com/edit/nextjs-mckpbw?file=pages/editor.js

[Eloi-Perez]

In my search I found this recent medium article on this. https://medium.com/@sfazleyrabbi/next-js-editor-js-complete-setup-guide-7136c8bb694e

Following a bit of that example, I've created a repository with a fully working editor.js in Next.js.
I'm still working on it. But the basic functionality is already there. github.com/Eloi-Perez/my-next-editorjs
Anyone interested feel free to copy or fork the repository.