Tech Blog
Next.js + TypeScriptで構築した個人技術ブログ
実際の画面の様子
記事一覧
記事詳細
開発ログ
プロジェクト概要
エンジニアとしての学習内容や技術的な知見をアウトプットするために構築した個人技術ブログです。
マークダウンファイルベースの記事管理システムと、JWT認証による管理画面を実装しています。
ZennやQiitaで発信していた内容を移行し、独自のプラットフォームとして運用しています。
主な機能
記事表示機能
- •マークダウン形式での記事執筆
- •シンタックスハイライト対応
- •目次の自動生成
- •タグによる記事分類
検索・フィルタリング
- •キーワード検索機能
- •タグフィルタリング
- •ページネーション
管理画面（認証機能）
- •JWT認証によるログイン機能
- •ブラウザ上での記事作成・編集・削除（CRUD操作）
- •マークダウンエディタ搭載
- •記事一覧からの管理
その他
- •レスポンシブデザイン（モバイル対応）
- •開発ログページ（サイトの更新履歴）
- •ポートフォリオページ
使用技術
フロントエンド
- • Next.js 16（App Router）
- • TypeScript
- • Tailwind CSS
- • React 19
認証・セキュリティ
- • JWT（Jose）
- • HTTP-only Cookie
コンテンツ管理
- • ファイルベースMarkdown
- • gray-matter（Front Matter解析）
- • remark/rehype（Markdown処理）
インフラ・開発環境
- • Vercel（デプロイ・ホスティング）
- • Git/GitHub
- • WSL2 (Ubuntu)
- • VSCode
工夫した点
1. 公開サイトと管理画面の明確な分離
Next.jsのRoute Groups機能を使い、一般ユーザー向けのページと管理者専用ページを別々のフォルダに分けました。 これにより、それぞれ独立したレイアウトや認証ロジックを適用でき、コードの見通しが良くなっています。
2. データベース不要の軽量な記事管理
記事をマークダウンファイルで管理することで、データベースのセットアップが不要になり、シンプルな構成になっています。 Gitで記事の変更履歴も管理でき、デプロイも高速です。
3. セキュアな認証機能
管理画面へのアクセスにはJWTトークンによる認証を実装しました。 トークンはHTTP-only Cookieに保存することで、JavaScriptからアクセスできないようにし、セキュリティを高めています。
4. 執筆体験の改善
最初はエディタでマークダウンを直接編集していましたが、ブラウザ上で記事を作成・編集できる管理画面を追加しました。 これにより、どこからでも手軽に記事を執筆、投稿できるようになりました。
5. 小さく始めて段階的に改善
最初は記事表示だけのシンプルな構成でスタートし、その後に検索機能、管理画面、レスポンシブデザインなどを順次追加しました。 DevLogページでその過程を記録しています。
開発の背景
エンジニアとして学んだ内容や技術的な知見をアウトプットする場として、独自の技術ブログプラットフォームを構築しました。 ZennやQiitaなどの既存プラットフォームも便利ですが、自分で設計・実装することで、Next.jsやTypeScript、認証機能の実装など、 実践的なスキルを深く学ぶことができています。
また、このサイト自体が一つのポートフォリオとして機能するようにしており、 継続的に機能を追加・改善しながら、技術的な成長を記録する場としています。