https://github.com/b13o/microcms-blog

🐞 A simple blog app. JAMstack by Next.js and microCMS.
https://github.com/b13o/microcms-blog

jamstack microcms msw mvp nextjs real-world testing-library-react typescript vitest

Last synced: 10 months ago
JSON representation

🐞 A simple blog app. JAMstack by Next.js and microCMS.

• Host: GitHub
• URL: https://github.com/b13o/microcms-blog
• Owner: b13o
• Created: 2025-01-29T21:03:36.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-03-25T07:32:25.000Z (10 months ago)
• Last Synced: 2025-03-25T08:30:05.336Z (10 months ago)
• Topics: jamstack, microcms, msw, mvp, nextjs, real-world, testing-library-react, typescript, vitest
• Language: TypeScript
• Homepage: https://b13o.github.io/microCMS-blog/
• Size: 139 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


# 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**](https://microcms.io)」の使用です。

- microCMS では、管理画面からコンテンツを作成できます

- データ取得には、開発者向けの API を使用できます

- ユーザー登録が必要ですが、個人の小規模なプロジェクトでは無料枠の範囲で使用できます

## ユーザーストーリー

- **TOP ページ：**

  - [ ] ユーザーがサイトにアクセスすると、H1 タグでサイトのコピーが表示されている

  - [ ] ヒーロセクションの下には、未読記事が 1 つランダムで大きく表示されている

  - [ ] 全ての記事が既読の場合は、全ての中からランダムに 1 つを表示する

  - [ ] 未読記事のカードには、背景に画像を表示し、その上にタイトル、タグ、導入文を表示する

  - [ ] 導入文は、記事本文から最初の 80 文字のテキストを表示し、それ以降は（`…`）と表示する

  - [ ] 記事一覧がグリッドレイアウトで表示されている

  - [ ] 各記事カードには、タイトル、タグ、サムネイル画像、投稿時刻が表示される

  - [ ] 投稿時刻は、直近６ヶ月以内の投稿を相対的な時刻で表示する(ex: 10 分前, 3 日前, 6 か月前)

  - [ ] 記事カードをクリックすると、詳細ページに遷移する

- **詳細ページ：**

  - [ ] 詳細ページの URL は、`domain.com/posts/[slug]`という形式になっている

  - [ ] 詳細ページには、記事の全文が表示される

- **その他**：

  - [ ] 必須機能に対して、適切なテストが実装されている

  - [ ] アプリケーションがデプロイされており、誰でもアクセス可能である

  - [ ] microCMS 上で記事を追加した際に、webhook で通知を受け取り、自動でビルドが行われる