今回使用したツール

• Next.js(React.js)
• shadcn/ui
• microCMS
• Vercel(サーバーレスプラットフォーム)

UIはshadcn/uiとTailwind CSSを使用

目的

ReactのUIコンポーネントに触れるため

Next.jsの機能SSG,ISRを活用するため

github

https://github.com/Takuya-wool-Sato/next-blog-micro-cms

記事一覧

記事一覧はmicroCMSを使用して、投稿

SSG（静的サイトジェネレータ）を使用

Qiita記事一覧

QiitaのNext.jsに関する記事（ストック10以上、作成日順）をapiで取得

ISRを使用して、静的に表示

Zenn記事一覧

ZennのNext.jsに関する記事、公式のAPIが特にないため、Webスクレイピングで情報取得

ISRを使用して、静的に表示

ショートページ

QiitaとZennの記事をショート動画風のUIで表示するページです

スマホでスワイプすることで次の記事に移動できます

自動的に一定時間経過後に次の記事に進む機能もあります

記事を見るボタンから詳細ページに遷移できます