概要
このプロジェクトでは、普段の作業で使えるようなプロンプトを管理するツールを構築します。
プロンプトのテンプレート、それに沿ったフォーム、作成したプロンプトの保存ができるようにします！
学習目標
今回は、React/ Next.js における MDX（markdown）の実装について、学習します。
特に、MDX の基本的な扱いと、next-mdx-remote-client を使用した柔軟なコンパイル処理について、理解を深めてください。
合わせて、Cloudflare（@opennextjs）へのデプロイ手順も確認してください。
推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- Next.js 15 App Router
- @mdx-js/mdx による MDX（md）の導入
- next-mdx-remote-client による動的な解析
- Tailwind CSS を用いたスタイリング
- Shadcn/ui のコンポーネントの活用
- TypeScript による型チェック
- Cloudflare（＠opennext） へのデプロイ
🎯 お題
- 「ユーザーストーリー」を全て満たすアプリを構築してください。
- 必要に応じて、プロジェクトを自分の好みでカスタマイズしても構いません。
- シンプルで分かりやすい実装を心がけてください。
必須機能
- テンプレート一覧表示：
- MDX ファイルから読み込んだテンプレートを一覧で表示する。
- テンプレート詳細表示：
- 個別テンプレートのタイトル、説明、テンプレート内容を表示する。
- 動的プロンプト生成：
- テンプレート内の変数をフォームで編集し、リアルタイムでプロンプトを生成する。
- 生成したプロンプトの活用：
- 生成したプロンプトをクリップボードにコピーできる。
- 生成したプロンプトを保存し、評価できる機能を提供する。
ユーザーストーリー
- ユーザーがサイトにアクセスすると、カテゴリ別のテンプレート一覧が表示される。
- テンプレートカードをクリックすると、詳細ページに遷移する。
- テンプレート詳細ページでは、テンプレートの説明と変数入力フォームが表示される。
- 変数を入力すると、リアルタイムでプレビューが更新される。
- 「コピー」ボタンをクリックすると、生成されたプロンプトがクリップボードにコピーされる。
- 「保存」ボタンをクリックすると、生成したプロンプトが履歴に保存される。
- 保存したプロンプトに対して、効果を 1〜5 段階で評価できる。
- MDX を使用した About ページでは、React コンポーネントが埋め込まれ、インタラクティブな要素が表示される。
- アプリケーションがデプロイされており、誰でもアクセス可能である。