はじめに

この記事は、Next.js + TypeScript + Tailwind CSSを使って、Zenn風の個人ブログサイトを構築する方法を紹介します。

技術スタック

• Next.js 15: App Routerを使用
• TypeScript: 型安全な開発
• Tailwind CSS: ユーティリティファーストなスタイリング
• デジタル庁デザインシステム: アクセシビリティに配慮したコンポーネント

主な機能

Zenn風のMarkdown記法

このブログでは、以下のような記法をサポートしています：

// コードブロックのサンプル
export default function Home() {
  return <div>Hello World!</div>;
}

フロントマター

記事のメタデータはYAML形式で記述します：

---
title: "記事のタイトル"
emoji: "😸"
type: "tech"
topics: ["nextjs", "react"]
published: true
---

まとめ

このシステムを使うことで、簡単に技術ブログを運用できます。

記事はarticles/ディレクトリに配置するだけで自動的に認識されます。