プロジェクト詳細

このプロジェクトは、Next.js を基盤としたコンテンツ管理システム (CMS) です。 プロジェクト、画像、ブログ記事、ニュースといった多様なコンテンツを作成、編集、および管理するための一元化された機能を提供します。 ユーザー向けのフロントエンド機能と、コンテンツ管理を行うためのセキュアなダッシュボード機能を備えています。

課題と解決策

• 多様なコンテンツ管理: 複数のコンテンツタイプ（プロジェクト、ブログ、ニュースなど）を効率的に構造化し管理するため、Cloudflare D1 をデータベースとして採用し、Drizzle ORM を通じて柔軟なデータ操作を実現しています。
• メディアファイル管理と配信: 大容量の画像やその他のメディアファイルを効率的かつコスト効率よく保存・配信するため、Cloudflare R2 をオブジェクトストレージとして利用しています。
• セキュアなアクセス: コンテンツの安全な管理と、管理者のみがアクセスできる環境を実現するため、NextAuth.js による堅牢な認証システムを導入しています。
• パフォーマンスと拡張性: 高速でスケーラブルなコンテンツ配信を可能にするため、Next.js のレンダリング機能と Cloudflare を利用したデプロイメント戦略（OpenNext.js/Cloudflare）を採用しています。

特徴

• プロジェクト、画像、ブログ記事、ニュースなど、異なる種類のコンテンツを一元的に管理できます。
• ユーザー認証により保護された、直感的で使いやすい管理ダッシュボードを提供します。
• Cloudflare D1 によるサーバーレスデータベースを利用し、データ管理の運用負荷を軽減しています。
• Cloudflare R2 によるオブジェクトストレージを活用し、メディアファイルの保存と配信を最適化しています。
• Markdown 形式での記事作成に対応しており、コードのシンタックスハイライトや YouTube 動画の埋め込みが容易に行えます。
• Radix UI と Tailwind CSS を活用した、モダンでレスポンシブなユーザーインターフェースを備えています。
• Cloudflare Workers 環境へのデプロイに最適化された設計となっています。

使用技術

• Bun
• TypeScript
• Next.js
• Hono
• Drizzle ORM
• Cloudflare R2
• Cloudflare D1
• NextAuth.js
• Tailwind CSS
• shadcn/ui
• React Hook Form
• Zod
• React Markdown
• Remark GFM
• Remark YouTube
• React Syntax Highlighter
• Cloudflare Workers