JAMstack ブログアプリ
概要
このプロジェクトでは、microCMS を使用したシンプルなブログアプリを構築します。
ビルド時に静的 HTML を生成することで、従来の Web サイトより表示速度を向上させた JAMstack ブログです。
学習目標
Next.js と microCMS を用いた、JAMstack ブログの実装を学びます。
合わせて、Vitest を使用した React の自動テストについても、挑戦してください。
推奨技術
このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。
- Next.js App Router でのプロジェクト構築
- TypeScript による型チェック
- Tailwind CSS を用いたスタイリング
- shadcn/ui によるコンポーネントの導入
- microCMS によるコンテンツの管理
- Vitest/ Testing Library React によるテストの実装
- MSW による API モック
🎯 お題
- 「ユーザーストーリー」を全て満たす、アプリを構築してください。
- 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。
- なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。
必須機能
- 未読記事のランダム表示：
- TOP ページのヒーロセクションには、未読の記事を大きく表示する
- 記事一覧表示：
- microCMS から取得した記事を一覧表示
- グリッドレイアウトで表示する
- 記事詳細表示：
- 記事の詳細ページを実装する
- 詳細ページの URL は、
domain.com/posts/[slug]という形式にする
- その他：
- ビルド時に静的サイト生成を行う
- microCMS 上で記事を追加した際に、webhook で通知を受け取り、自動でビルドを行う
追加情報
今回推奨する ブログコンテンツの管理方法は、「microCMSr」の使用です。
- microCMS では、管理画面からコンテンツを作成できます
- データ取得には、開発者向けの API を使用できます
- ユーザー登録が必要ですが、個人の小規模なプロジェクトでは無料枠の範囲で使用できます
ユーザーストーリー
- TOP ページ：
- ユーザーがサイトにアクセスすると、H1 タグでサイトのコピーが表示されている
- ヒーロセクションの下には、未読記事が 1 つランダムで大きく表示されている
- 全ての記事が既読の場合は、全ての中からランダムに 1 つを表示する
- 未読記事のカードには、背景に画像を表示し、その上にタイトル、タグ、導入文を表示する
- 導入文は、記事本文から最初の 80 文字のテキストを表示し、それ以降は（
…）と表示する - 記事一覧がグリッドレイアウトで表示されている
- 各記事カードには、タイトル、タグ、サムネイル画像、投稿時刻が表示される
- 投稿時刻は、直近６ヶ月以内の投稿を相対的な時刻で表示する(ex: 10 分前, 3 日前, 6 ヶ月前)
- 記事カードをクリックすると、詳細ページに遷移する
- 詳細ページ：
- 詳細ページの URL は、
domain.com/posts/[slug]という形式になっている - 詳細ページには、記事の全文が表示される
- 詳細ページの URL は、
- その他：
- 全ての必須機能に対して、適切なテストが実装されている
- アプリケーションがデプロイされており、誰でもアクセス可能である
- microCMS 上で記事を追加した際に、webhook で通知を受け取り、自動でビルドが行われる