古いポートフォリオサイトは Gatsby で作っていて, ライブラリのアップデート等で動かなくなっていたので新しく Contentlayer を使用して作り直しました。
# 使用している技術
Next.js
Next.js は、React ベースのフレームワークであり, 効率的なウェブアプリケーションの構築をサポートします。Next.js は, SSR（サーバーサイドレンダリング）と SSG（静的サイト生成）の両方をサポートし, パフォーマンスの向上と開発の迅速化を実現します。
詳細については, Next.js 公式ウェブサイトを参照してください。
Tailwind.css
Tailwind.css は, 高度なカスタマイズ性を持つCSSフレームワークです。クラスベースのスタイリングを提供し, 独自のデザインシステムを構築することができます。Tailwind.css には, レスポンシブデザインやダークモードのサポートなど, さまざまな便利な機能が備わっています。
詳細については, Tailwind.css 公式ウェブサイトを参照してください。
Contentlayer
Contentlayer は, 静的サイトジェネレーターの一部として使用される, データ駆動型のコンテンツ管理システム（CMS）です。今回は Notion をバックエンドとして使用し, Notion 上で作成したコンテンツを静的なウェブページとして生成します。
Contentlayer は, コード内にスキーマを定義し, そのスキーマに基づいてコンテンツを取得することができます。これにより, ウェブサイトのコンテンツの管理と更新が簡単になります。
詳細については, Contentlayer 公式ウェブサイトを参照してください。
# 構成
Notion を CMS として, Contentlayer で SSG のサイトを構築しています。
Notion と Contentlayer の連携に関しては α版なので, 現状 Contentlayer の特定のバージョン（v0.3.2）でしか動かないようでした。
Notion は下記のようなデータベースを使用してブログのコンテンツを管理しています。
現状, マークダウンから HTML を生成して, Tailwind の typography で CSS をあてている形なので, デザインや文字の大きさ, フォントなどを決めていきたいと思っています。
プログラムが気になる方は GitHub にあげていますので, 参考にしてください。