概要

LEAF WriterをNext.jsから使用する方法について紹介します。

デモ

以下のURLからお試しいただけます。

leaf-writer-nextjs.vercel.app
leaf-writer-nextjs.vercel.app

以下が画面例です。ヘッダー部分がNext.jsを用いて追加した部分です。エディタ部分はLEAF Writerを使用しています。

ソースコードは以下でご確認いただけます。

GitHub - nakamura196/leaf-writer-nextjs
Contribute to nakamura196/leaf-writer-nextjs development by creating an account on GitHub.
GitHub

使用方法

以下に記載があります。

packages/cwrc-leafwriter · main · Canada LINCS / CWRC / LEAF-Writer / LEAF-Writer · GitLab
https://leaf-writer.leaf-vre.org
GitLab

注意点として、div containerのidをleaf-writer-containerにする必要があります。これを行わない場合、スタイルが崩れることがわかりました。この点は、今後プルリクエストを送りたいと思います。

# const container = document.getElementById('#leaf-writer');
const container = document.getElementById('#leaf-writer-container');

まとめ

LEAF Writerの応用にあたり、参考になりましたら幸いです。

動画版（生成AIによる自動生成）: この記事の内容をずんだもん×四国めたんの掛け合いで解説しています。自動生成のため、内容に誤りがある可能性があります。正確な情報は記事本文をご参照ください。