Next.js と microCMS を用いて構築したブログ。

microCMS に投稿した Markdown ドキュメントからブログサイトを生成。 remark と rehype を使用して Markdown ドキュメントを処理。記事に書かれたリンクから OGP 情報を取得してリンクカードを生成するプラグインを作成し使用することでリッチな記事表示を実現。ソースコードが push されると自動的にサイトが Vercel へデプロイされるよう構成。 ISR (Incremental Static Regeneration) によってページがレンダリングされるため、ブログ自体のビルド時間が短縮される。

ほとんどを TypeScript で書くことで堅牢な開発環境を実現。 prefers-color-scheme によるダークモードに対応。 Dependabot で依存関係更新の Pull Request を自動生成するよう設定。ソースコードが main ブランチに push されると自動で Lint が実行されるよう GitHub Actions を構成。

過去のバージョン (v1) では Gatsby を用いていた。 Gatsby を用いたブログの構築方法については 記事 を公開中。

技術スタック

• TypeScript
• Next.js
• React
• unified (remark, rehype)
• ESLint
• Prettier
• Tailwind CSS
• Vercel
• microCMS
• GitHub Actions
• Amazon Route 53