Next.js + TypeScript で技術ブログを作成しました

はじめに

Next.js と TypeScript、Tailwind CSS を使って Zenn 風の技術ブログを作成しました。 この記事では、このブログの特徴や技術スタックについて紹介します。

技術スタック

このブログは以下の技術を使用して構築されています：

• Next.js 15: React のフレームワーク
• TypeScript: 型安全な開発
• Tailwind CSS: ユーティリティファーストの CSS フレームワーク
• Markdown: 記事の執筆形式

主な機能

1. 静的サイト生成（SSG）

next.config.ts で output: 'export' を設定することで、完全な静的サイトとして出力できます。 これにより、Vercel などのホスティングサービスで高速に配信できます。

2. Markdown サポート

記事は content/posts/*.md として管理され、以下のライブラリで処理されます：

• gray-matter: フロントマターの解析
• remark: Markdown の変換
• rehype-highlight: コードのシンタックスハイライト

3. Zenn 風のデザイン

Tailwind CSS を使用して、Zenn のようなクリーンで読みやすいデザインを実現しています。

コードサンプル

TypeScript での型定義の例：

export interface PostMetadata {
  title: string
  date: string
  slug: string
  emoji?: string
  tags?: string[]
  published?: boolean
}

記事の書き方

記事は以下のようなフロントマターを含む Markdown ファイルとして作成します：

---
title: "記事のタイトル"
date: "2024-01-15"
emoji: "📝"
tags: ["Next.js", "TypeScript"]
published: true
---

## 見出し

本文をここに書きます...

デプロイ

Vercel へのデプロイは非常に簡単です：

1. GitHub にリポジトリをプッシュ
2. Vercel でプロジェクトをインポート
3. 自動的にビルド・デプロイされます

まとめ

Next.js と TypeScript を使った技術ブログの構築は、モダンな開発体験を提供してくれます。 Markdown で記事を書くことで、Git で管理しやすく、バージョン管理も容易になります。

ぜひ、このテンプレートを使って自分だけの技術ブログを作ってみてください！