このサイトを支える技術

フロントエンド: Next.js / React

Next.js で Incremental Static Regeneration の機能を使ってすべてのページを生成しています。 fullAMP や PWA にも対応していてページの表示速度に貢献しています。

スタイル: Tailwind CSS

ユーティリティファーストなCSSフレームワーク。 display: flex → .flex のように網羅的なユーティリティが揃っていて組み合わせて使う設計になっています。 コンポーネントの再利用でスタイルの詳細度が意図しない優先度になることを防げるのでモダンフロントエンドと相性がいいと感じています。ファイルサイズが大きいので使用されていないスタイルを削除する PurgeCSS が必要。

デプロイ環境: Vercel

このサイトでは Vercel にデプロイされています。Next.js との相性の良さや設定の手軽さ、記事更新時の再ビルド/デプロイが簡単にできます。

コンテンツ管理: Zenn / microCMS

このサイトでは Zenn と記事を共有しています。 Zenn の記事は zenn-cli を使って GitHub の zenn-contents リポジトリで管理していて GitHub Actions を使って microCMS に同じ内容を保存しています。 このサイトはその microCMS から記事を取得して構築されていています。 Markdown ファイルを共有してもよかったのですが microCMS を挟むことで Jamstack の知見を積むことや記事一覧などのデータ取得が容易になりました。