空雲 Blog

Eye catchNext.jsとFirebaseによるSSR対応Blogの作成

publication: 2021/11/20
update:2023/06/22
FirebaseNext.jsReact

Blogシステムの刷新

私が以前から利用していたBlogシステムはこちらにあります。
フロントはフレームワークを使用せずTypeScriptで書き起こしており、バックエンドはNode.jsでTypeORMを使用してPostgreSQLにアクセスしています。
さすがに技術的に古くなりすぎたので、更新しようと完全にシステムの作成に取りかかりました。

当初はMicroCMSを利用してデータを管理しようかと

というものを作成したのですが、最終的にAPI仕様が私の目的と合致しなかったため利用を取りやめました。
下書き(非公開)状態の設定が無料版のAPIだと出来ないというのが理由です。

その後、データ管理はFirebaseに切り替えることで落ち着きました。
このBlogはどうせ大したアクセスが来ないことが予測できるため、無料の範囲で収まることが容易に想像できます。

色々と生み落とされる副産物

  • https://www.npmjs.com/package/@react-libraries/markdown-editor
    リッチMarkdownEditorです。今回はテキスト形式にMarkdownを採用したのですが、React用に特化したMarkdownエディタが無かったので自作しました。これを作るのに無駄に時間を食われましたが、作ってしまったものは仕方ありません。

  • https://www.npmjs.com/package/@react-libraries/use-ssr
    Next.jsでSSRを簡単に行うためのライブラリです。このライブラリの特徴は、データのfetch処理を一回書くだけでSSRとクライアントの処理を同時にこなせることです。getServerSidePropsでサーバ専用を書く必要はありません。私の知っている限り同様のことをやっているライブラリはApolloのGraphQLぐらいです。

  • Firestoreの操作ライブラリ
    現時点でnpmライブラリにはしていませんが@react-libraries/use-ssrと組み合わせて、受け取ったデータをSSRする機能があります。今回のBlog作成で使用しています。TypeORM擬きになっていて、TypeScriptのDecoratorで型やコレクション名などを指定して、Date型などの自動変換を行うようになっています。

編集機能など

{"width":"1719px","height":"1446px"}

画像のコピペやドラッグドロップにも対応させています。そのまま張り付くだけだと芸が無いので、pngやjpegはwebpに自動変換させ、さらにMarkdownの画像のalt部分を使って、画像サイズの情報が自動挿入されるようになっています。

画像は読み込みの高速化を行うため、FirebaseStorageからCloudStrageのアドレスに自動変換するロジックを入れています。これをやるだけで300ms程度かかる応答速度を10ms以下に縮められます。

また、Markdown中で使われなくなった画像は、テキスト保存時に自動消去するようになっています。

今後

まだ完成したわけではないので、コンテンツを入れ込みつつ、ブラッシュアップを図って行けたらと思っています。