昨日 Figma で設計した画面をもとに、本日は Next.js と Tailwind CSS を用いて Hacker News のモバイル版を完成させました。完成したアプリは Vercel にデプロイしています。
実装にあたっては、Figma のデザインにできるだけ忠実に再現するため、global.css にフォントサイズ・行間・カラーなどのデザイントークンを定義しました。コンポーネント側ではそれらを参照する形で実装しています。
特に苦労した点は、「Read More」ボタン押下時に、既存のブロックの後ろへ新しい記事ブロックを追加する処理です。当初は use server を用いてロジックを組み立てましたが、想定どおりに動作せず、最終的には use client に切り替えました。useState と useEffect を使い、取得済みデータに追加で記事を結合していく方法を採用しています。
また、Navigation の TOP / NEW / BEST を切り替えた際に、そのタイミングで新しい記事を再取得できるようにする点も工夫しました。useContext を利用してナビゲーションの状態をグローバル管理し、その値が変化したタイミングで表示用コンポーネントを再描画することで、ページ構成をシンプルに保ったまま機能を実装できました。
これにて Hacker News モバイル版の制作は一区切りとしたいと思います。