はてなブックマーク

2022.11.14[Mon][シリーズ連載] Lexicalでリッチテキストエディターを自作するLexicalでリッチテキストエディターのベースを作るReactJavascript 簡単な装飾をおこなったコンテンツをGUI上で入力できるリッチテキストエディター。 Wordpressでも利用されているGutenbergなどが有名ですね。 リッチテキストエディターは数あれど、 「この装飾がない！」 「出力をカスタマイズしたいからjson形式で取り出したい！」 「エディター内とフロントアプリケーションのスタイルを合わせたい！」 など、既製ライブラリままだと要件を満たせないこともあると思います。 そこで、今回はMetaのリッチテキストエディターを作れるフレームワーク、Lexicalの使い方を紹介します。 LexicalはReact用のインターフェイスも用意してくれているので、今回はReactでの

概要next/imageは画像を自動で最適化してくれる便利なコンポーネントです。 使用には基本的にサイズ（width, height）を事前に指定する必要がありますが、APIから画像を受け取って表示する場合など、事前にサイズを指定したくないケースがあると思います。 この記事では、そのような場合でもnext/imageを使って画像を表示する方法をご紹介します。 環境としては、Next 12.1.2 を使用します。 Next.js 13以上を使用する場合は、こちらの記事をご覧ください。