Next.jsで個人ブログを作成しました

2023年ももうすぐ終わり。今年は良き1年になりましたか？
私は以前から作成していた個人ブログが一段落ついたので、年末年始だというのにブログ用サーバーを構築しています。不本意ながらエンジニア適正は割と高いのかもしれません。

個人ブログは好きな時に好きなように書けるのでアウトプットの場として非常に優秀で、以前より書きたいと思っていました。この度やっと公開できる段階までこぎつけたので、このブログの開発についてを纏め、最初の記事としたいと思います。

概要

今回作成したソフトウェアは Telepapyrus、Markdown対応の個人ブログ用ソフトウェアです。名前は古代エジプトで筆記媒体として利用されていたパピルス(Papyrus)に、接頭辞のTeleを付けた造語です。

主な使用技術は以下の通りです。

Markdownで書けることを最重要とし、パフォーマンスに気を使いながら必要最低限の機能を埋め込むよう意識して開発しました。現在(2023/12/31)の時点で以下の機能が実装されています。

Markdownでの記述
- SSR (サーバーサイドでの変換)
- コードブロック、画像、テーブルなどに対応
管理画面 (記事の作成、削除に対応)
タグ機能

今の時代当たり前のように SaaS を利用して書けるブログですが、今回は Web の勉強の意味も含めて自作しました。なお余談ですが、最も凝った機能は管理画面です。管理画面にアクセスするのは自分だけなので後回しにすべきだったのですが、楽しくなって気づいたら最も力を入れたページになってしまいました。

技術的なお話

SSR

Telepapyrus は Next.js の App Router を使用しています。
App Router ではページがデフォルトとして Server Component として扱われ、サーバー側でレンダリングが行われます。この機能を活用し、Markdown からの変換をサーバー側で行うようにしました。これによりページのロードが早くなったり、生の Markdown データを秘匿して運用が可能となりました。

演算能力も帯域も圧迫しないので、記事ページの Lighthouse のスコアは 100 を記録しています。画像が増えるともう少し下がってしまうのが残念なところです。

コードブロック

技術ブログに必須であるコードブロックは Rehype Pretty Code を利用して実装しました。

example.ts

export const sayHello = () => {
  console.log("Hello, World!");
}

上記のように、シンタックスハイライトや行のハイライト、コピーなどが可能です。

shadcn/uiの活用

今思えば苦行すぎるのですが、最初は自分でコンポーネントを作成していました。
これでは日が暮れてしまうと何十回か日が暮れた後に気づき、途中から shadcn/ui を導入して書き換えました。
shadcn/ui はボタンや入力欄など、基本的なコンポーネントを提供してくれます。
これにより開発効率が向上し、全体として統一感が生まれるというおまけも付いて来ました。

具体的に以下の画像は管理画面の下書きページなのですが、割と美しく作成できて個人的に満足しています。

プロジェクト構造

クリーンアーキテクチャの隅っこを齧った程度の知識で、オレオレアーキテクチャを使用しています。
具体的に ./src/layers において、データベースとデータを利用する側の間を疎結合にするよう意識しました。
これによりレイヤーごとに jest を用いたテストの実装 ( ./src/app/api/v1/article/[id]/unit.test.ts など ) を行いました。

今後について

Telepapyrus は最低限の機能を持っていますが、まだかなり不十分です。具体的に以下の機能や調整が不足しています。

画像アップロード機能
OGPの実装
SEO対策
画像やテーブルの前後の余白の調整など

挙げればキリがないので、自分が困ったものから順にゆるくアップデートしていく予定です。

また、Telepapyrus を作成した元の目的はアウトプットする場を作ることでした。
これを無駄にしないためにも、学んだことを積極的に書いていけたら最高だと思います。

それでは、良いお年を。