概要
このプロジェクトでは、お知らせ・アンケート・クイズ機能を持つ掲示板アプリを構築します。
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 を参照してください。
- スタイルは、あなた自身で独自にカスタマイズすることが可能です。
必須機能
- カテゴリ管理（SSG）：
- 固定のカテゴリを静的生成で表示
- 一覧ページ（SSR）：
- 最新の一覧をサーバーサイドで取得・表示
- 詳細ページ（ISR）：
- 詳細を定期的に更新、リアルタイムな結果反映
- インタラクティブ機能（CSR）：
- アンケート投票機能
ユーザーストーリー
- ユーザーがサイトにアクセスすると、掲示板の一覧ページが表示されている。
- 一覧ページで、投稿のタイトル・内容・作成日時が表示される。
- 一覧ページで、投稿をクリックすると、詳細ページが表示される。
- 一覧ページでは、カテゴリをクリックすると、それに一致する投稿のみが表示される。
- カテゴリ一覧ページでは、すべてのカテゴリの一覧が表示される。
- 詳細ページで、投稿のタイトル・内容・作成日時が表示される。
- 詳細ページで、投稿の種類に応じた内容を閲覧することができる。
- 詳細ページで、アンケート投票を行うことができる。
- 詳細ページで、クイズを解くことができる。
- アプリケーションがデプロイされており、誰でもアクセス可能である。