Next.js 14 と microCMSで作る俺得RSSリーダー：技術選定・設計編 #React

前回のお話・今回の記事について

前回の記事

企画~機能洗い出しまでできた。

今回は設計編。
前回の記事の中でも書いた通り、"あとは書くだけ"状態になるまで設計していくのが目標。

技術選定

今回はNext.js 14 とmicroCMSで開発していきたいので、これを軸に技術選定していきます。

開発環境

OS：macOS

IDE：VSCode

バージョン管理：Github

デプロイ環境：Vercel（Hobbyプラン）

Dockerで開発環境構築しようかなとも思ったけど、自前で用意するにはまだ知見が足りないのとVercel利用でそんなに必要ない気もしたので今回は使わない方針で...。（逃げ）

技術選定

使用フレームワーク：Next.js 14 (14.2.3)
※TypeScript使用, App Router, TailWind不使用

CSS：CSS modules, Sass
※CSS modules使用にあたり、型安全の仕組みを作るために typed-scss-modules を使用。

CMS：microCMS

RSSパース： rss-parser というライブラリの使用を検討。（初タッチ）

他、必要になったライブラリは後ほど下に追記していきます。

ディレクトリ構造検討

.
└── src/
    ├── app/
    │   ├── rss/
    │   │   ├── page.tsx
    │   │   └── RssPage.module.scss
    │   ├── category/
    │   │   ├── page.tsx
    │   │   └── CategoryPage.module.scss
    │   ├── month/
    │   │   ├── page.tsx
    │   │   └── MonthPage.module.scss
    │   ├── search/
    │   │   ├── page.tsx
    │   │   └── SearchPage.module.scss
    │   ├── bookmark/
    │   │   ├── page.tsx
    │   │   └── BookmarkPage.module.scss
    │   ├── site/
    │   │   ├── page.tsx
    │   │   └── LinkPage.module.scss
    │   ├── libs/
    │   │   └── client.ts
    │   ├── page.tsx
    │   ├── layout.tsx
    │   └── FrontPage.module.scss
    │
    ├── public/
    │   ├── components/
    │   │   ├── card/
    │   │   │   ├── ArticleCard.tsx
    │   │   │   └── ArticleCard.module.scss
    │   │   ├── sidebar/
    │   │   │   ├── Sidebar.tsx
    │   │   │   └── Sidebar.module.scss
    │   │   ├── header/
    │   │   │   ├── Header.tsx
    │   │   │   └── Header.module.scss
    │   │   ├── footer/
    │   │   │   ├── Footer.tsx
    │   │   │   └── Footer.module.tsx
    │   │   └── search/
    │   │       ├── Search.tsx
    │   │       └── Search.module.scss
    │   └── styles/
    │       ├── destyle.css
    │       └── global.scss
    ├── package.json
    ├── tsconfig.json
    └── next.config.mjs

おそらくこれで全て網羅されているはず。
UIを簡素化するために、全ページのレイアウトは変えない予定。
そのため layout.tsx は一つでいい。

microCMSのクライアントはsrc/libs下に格納。
管理画面作る必要ないのやっぱり楽だね...CMSさいこぉ...

API設計

RSSエンドポイント
https://xxxxxx.microcms.io/api/v1/rss

フィールドID	表示名	タイプ	必須
title	タイトル	テキストフィールド(string)	⚪︎
url	URL	テキストフィールド(string)	⚪︎
category	カテゴリ	コンテンツ参照(object)	-

RSSを登録する際はタイトル・URLを入力するのは必須。
カテゴリをコンテンツ参照で持ってくることでカテゴリ分類を可能にする。

カテゴリエンドポイント
https://xxxxxx.microcms.io/api/v1/category

フィールドID	表示名	タイプ	必須
title	タイトル	テキストフィールド(string)	⚪︎
favorite	お気に入り	真偽値(boolean)	-

カテゴリの登録時は、タイトルとお気に入りのカテゴリかどうかを登録。
お気に入りがtrueの場合はTOPページに一覧表示するように設計。

ブックマーク登録について

本企画においてブックマーク機能は自分が一番欲しい機能。
rssのカードはコンポーネントにする予定のため、propsでbookmark(type:boolean)の状態を受け渡しつつ、ReactのhooksであるuseStateを使用して情報の更新を行う。

ブックマークページはbookmarkがtrueの場合にのみ取得・描画。
そんなに難しくなさそう。

検索機能

現状、検索はヘッダーにある検索部分から検索→Enterで検索結果表示を想定。

TOPページかそれぞれの一覧ページでuseState更新でもいいかなと思ったけれど、その機能は別途でつけた方が良さそう。（TOPページは表示数に制限があるため。）

これもpropsでキーワードを受け渡して部分一致で検索、みたいな形にすると良さそう。

次回予告

もうあとは書くだけ状態になったと思うので、次回から開発していきます。
プロジェクトの立ち上げからライブラリのインストール・セットアップまで全て載せていくので、興味のある方は追ってみてください。

気になることがある方はコメントもぜひ。

案件のご依頼やご相談について

ワタシが運営するUNOTAMEでは、制作案件やPM業務の外部委託案件などを承っております。
少しでも興味のある方はぜひカジュアルにお話しさせていただけますと嬉しいです。

Twitter(X)のDMや下記ポートフォリオサイトからのお問い合わせ、お待ちしております。