ブログで使用した技術スタックとライブラリ

ブログの構築に使用した技術スタックとライブラリを紹介し、それぞれの役割と採用理由を説明します。

Next.js↗ 基盤となるフレームワークにはNext.jsを選びました。 Next.jsはをベースにしたフレームワークで、（Server Side Rendering）をサポートしています。 SSRは（Search Engine Optimization）に有利で、必要な箇所で適切に使えば高い性能を発揮できます。 また、別途バックエンドサーバーを構築しなくてもデータベースにアクセスできる利点があります。

TypeScript↗ このプロジェクトはTypeScriptで書いています。 TypeScriptはを拡張した言語で、静的型付けをサポートします。 TypeScriptを使うと、コードの読みやすさを高め、実行時エラーを減らせます。

Tailwind CSS↗ Tailwind CSSはフレームワークで、クラスを使ってスタイルを適用します。 従来Reactで使っていたCSS-in-JSの方法は、SSRでは完全には動作しません。 CSS-in-JSはクライアントの実行時にスタイルを適用するため、SSRではスタイルが適用されないからです。 nextjs css-in-js docs↗

CSS-in-JSを使うには、追加の設定が必要です。 一方、はクラスでスタイルを適用するため、SSRでも完全に動作します。 初期設定や使い方には慣れが必要ですが、習得すれば開発も速くなると考えています。

Shadcn/UI↗ Tailwind CSSをベースにしたHeadless UIライブラリで、カスタマイズしやすいのが特徴です。 一からデザインしなくても基本機能が実装されており、開発を速められます。

next-mdx-remote↗ このブログの記事はMarkdownで書いています。 さらに、MarkdownとJSXを組み合わせられるファイルを使用しています。 これを扱うためにを採用しました。 MDXのコンパイルには、このほかにもいくつかの選択肢があります。 velite、contentlayer、next/mdxなどです。 しかし、まだ安定していなかったり、サポートが終了していたりするため、next-mdx-remoteを選びました。 公式ドキュメントにも使用例があり、資料も比較的豊富なので、このライブラリを使うことにしました。 Next.js公式ドキュメント（next-mdx-remote）↗

gray-matter↗ Markdownファイルのfrontmatterを抽出するために使います。 frontmatterはMarkdownファイルの先頭に置かれ、メタデータを保持します。 開発初期にはMDXファイル自体にタイトルや作成日などのメタデータを入れて抽出していましたが、現在はテスト用にのみ使用しています。

rehype↗ rehypeはHTMLを解析・変換するライブラリです。 MDXファイルをnext-mdx-remoteでHTMLに変換した後、rehypeで解析・変換するために使います。 主にスタイリングやカスタマイズを担います。 たとえば、見出しタグにしたり、したりします。 特にを使えば、数式を描画できます。

Prisma↗ APIエンドポイントを作る際、データベースへのアクセスに使ったライブラリです。 PrismaはORM（Object-Relational Mapping）ライブラリで、SQLを書かずにデータベースへアクセスできます。 私はSupabaseのPostgreSQLを使用しましたが、PrismaはPostgreSQLを主力としてサポートしています。 また、TypeScriptに対応し、コード補完や型チェックなどの利点もあります。

これらの技術スタックとライブラリは、現時点で最善だと考えて選びました。 ただし、ライブラリも技術も速いペースで変化するため、今後も新しい技術やライブラリを取り入れたいと考えています。 いつか行うに備えて、ライブラリへの依存をできるだけ抑え、開発中も各ライブラリの役割を明確にするよう努めました。