Next.js(ver13~)でEditor.jsを使う際にでたエラー【ダイナミックインポートを学ぶ❶】

エラー😭

⨯ node_modules/@editorjs/editorjs/dist/editorjs.umd.js (2:530) @ eval
⨯ ReferenceError: Element is not defined

原因

Editor.jsのソースコードはブラウザでしか動作しない。しかしnext.js13のデフォルトはssrであり、サーバー側でEditor.jsのソースコードを実行してしまっていた。

解決方法

ダイナミックインポートを利用してインポートの際に、「ssrしない」と記述する。下記を参照しました。

editor.jsを通常importし、初期化を行う「Editor」コンポーネント（こちらは直接実行できない）

Editor.tsx

//通常import
import EditorJS from "@editorjs/editorjs";
import ~

export default function Editor(){
   
   const initializeEditer = useCallback(async () => {
       const editor: EditorJS = new EditorJS({
           holder: "editor",
           placeholder: ~,
           inlineToolbar: ~,
           tools: ~,
           onChange: ~ ,
           data: JSON.parse(~),
       });
   }, []);
   
   //その他の処理
   
   return (
       <section>
           <div id="editor" className="mt-10 pb-10"></div>
       </section>
   )
   
}

EditorコンポーネントをダイナミックインポートするPost.tsx(こちらを実行する)

Post.tsx

import dynamic from "next/dynamic";//nextjsの機能
const Editor = dynamic(
  () =>
      import(
          "~/Editor"//Editorコンポーネントのパス
      ),
  {
      ssr: false,
  },
);
export default function Post(){
  return (
      <div>
          <Editor/>
      </div>
      
  )
}

ダイナミックインポートとは

ダイナミックインポートはモジュールを動的にインポートすることです。例えば、特定の処理が実行されたらimportしてね、みたいなことができます。
今回はインポートしているコンポーネントをssrしないように設定し、設定したコンポーネント（上記例の場合、Post.tsx）を実行することでエラーを解消しました。

おまけ

ダイナミックインポートの詳細↓

上記によると読み込み時にパフォーマンスを悪くしているコンポーネントに使用すると良い、といったことが書かれています。
トグルやタブのようにユーザー操作がない時に画面描画されていないコンポーネントで、パフォーマンスを下げてしまっているものがあれば使っていくと良いかもしれないです👍

また、使う時があれば記事にしたいと思います。