シンプルな掲示板アプリ

概要

このプロジェクトでは、お知らせ・アンケート・クイズ機能を持つ掲示板アプリを構築します。

GitHub の Discussions 風の UI/UX で、汎用性が高いシンプルな掲示板アプリです！

学習目標

今回は、Next.js App Router における、様々なレンダリングパターンについて、学習します。

SSR, SSG, ISR, CSR、それぞれの実装方法・特徴・使い分けについて、確認してください。

推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

• Next.js App Router を用いたアプリ開発（SSG, SSR, ISR, CSR）
• TypeScript による型チェック
• Tailwind CSS を用いたスタイリング
• shadcn/ui を用いた UI 構築
• json-server を用いた、DB・API のモック

---

🎯 お題

• 「ユーザーストーリー」を全て満たすアプリを構築してください。
• 必要に応じて、スクリーンショットやデモサイトの URL を参照してください。
• スタイルは、あなた自身で独自にカスタマイズすることが可能です。

必須機能

1. カテゴリ管理（SSG）：
   • 固定のカテゴリを静的生成で表示
2. 一覧ページ（SSR）：
   • 最新の一覧をサーバーサイドで取得・表示
3. 詳細ページ（ISR）：
   • 詳細を定期的に更新、リアルタイムな結果反映
4. インタラクティブ機能（CSR）：
   • アンケート投票機能

ユーザーストーリー

• ユーザーがサイトにアクセスすると、掲示板の一覧ページが表示されている。
• 一覧ページで、投稿のタイトル・内容・作成日時が表示される。
• 一覧ページで、投稿をクリックすると、詳細ページが表示される。
• 一覧ページでは、カテゴリをクリックすると、それに一致する投稿のみが表示される。
• カテゴリ一覧ページでは、すべてのカテゴリの一覧が表示される。
• 詳細ページで、投稿のタイトル・内容・作成日時が表示される。
• 詳細ページで、投稿の種類に応じた内容を閲覧することができる。
• 詳細ページで、アンケート投票を行うことができる。
• 詳細ページで、クイズを解くことができる。
• アプリケーションがデプロイされており、誰でもアクセス可能である。