react-aceをNext.jsで使うときのメモ

概要

react-aceは簡単にサイトにコードエディタを埋め込めるのでとても便利
だけどグローバルのwindowを参照するのでNext.jsで使うときに一苦労する
dynamic importを使う方法がいまいち調べても出てこなかったので書き留めておく。

Next.jsで使う

上述の通りwindowを参照するので公式に紹介されてる通りでは使えない
→dynamic importを使う

必要なライブラリをインストールする

npm install react-ace ace-builds

next.jsのdynamic importを使う

import dynamic from 'next/dynamic';

const AceEditor = dynamic(async () => {
  const ace = await import('react-ace');
  await import("ace-builds/src-noconflict/mode-???");
  await import("ace-builds/src-noconflict/theme-???");
  return ace;
}, { ssr: false });

???には自分の好きなモードとかテーマを入れてください
awaitしているのは、react-aceが読み込まれた状態じゃないとace-buildsのモードとかテーマが適用できないからです。

モードとかテーマとかなしにデフォルトで使うなら

import dynamic from 'next/dynamic';

const AceEditor = dynamic(async () => import('react-ace'), { ssr: false });

でいいと思います。

あとは公式で紹介されてる通りに使えるはずです