JAMstack ブログアプリ

概要

このプロジェクトでは、microCMS を使用したシンプルなブログアプリを構築します。

ビルド時に静的 HTML を生成することで、従来の Web サイトより表示速度を向上させた JAMstack ブログです。

学習目標

Next.js と microCMS を用いた、JAMstack ブログの実装を学びます。

合わせて、Vitest を使用したフロントエンドテストについても、確認してください。

推奨技術

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

• Vitest によるテストの実装
• Testing Library/ React による DOM テスト
• MSW による API モック
• Next.js App Router でのプロジェクト構築
• TypeScript による型チェック
• Tailwind CSS を用いたスタイリング
• shadcn/ui によるコンポーネントの導入
• microCMS によるコンテンツの管理

---

🎯 お題

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

必須機能

1. 未読記事のランダム表示：
   • TOP ページのヒーロセクションには、未読の記事を大きく表示する
2. 記事一覧表示：
   • microCMS から取得した記事を一覧表示
   • グリッドレイアウトで表示する
3. 記事詳細表示：
   • 記事の詳細ページを実装する
   • 詳細ページの URL は、domain.com/posts/[slug]という形式にする
4. その他：
   • ビルド時に静的サイト生成を行う
   • microCMS 上で記事を追加した際に、webhook で通知を受け取り、自動でビルドを行う

追加情報

今回推奨する ブログコンテンツの管理方法は、「microCMS」の使用です。

• microCMS では、管理画面からコンテンツを作成できます
• データ取得には、開発者向けの API を使用できます
• ユーザー登録が必要ですが、個人の小規模なプロジェクトでは無料枠の範囲で使用できます

ユーザーストーリー

• TOP ページ：
  • ユーザーがサイトにアクセスすると、H1 タグでサイトのコピーが表示されている
  • ヒーロセクションの下には、未読記事が 1 つランダムで大きく表示されている
  • 全ての記事が既読の場合は、全ての中からランダムに 1 つを表示する
  • 未読記事のカードには、背景に画像を表示し、その上にタイトル、タグ、導入文を表示する
  • 導入文は、記事本文から最初の 80 文字のテキストを表示し、それ以降は（…）と表示する
  • 記事一覧がグリッドレイアウトで表示されている
  • 各記事カードには、タイトル、タグ、サムネイル画像、投稿時刻が表示される
  • 投稿時刻は、直近６ヶ月以内の投稿を相対的な時刻で表示する(ex: 10 分前, 3 日前, 6 か月前)
  • 記事カードをクリックすると、詳細ページに遷移する
• 詳細ページ：
  • 詳細ページの URL は、domain.com/posts/[slug]という形式になっている
  • 詳細ページには、記事の全文が表示される
• その他：
  • 必須機能に対して、適切なテストが実装されている
  • アプリケーションがデプロイされており、誰でもアクセス可能である
  • microCMS 上で記事を追加した際に、webhook で通知を受け取り、自動でビルドが行われる