株式会社GenAi / エンジニア
社内用のテックブログを作成
◾️プロジェクト概要 自社開発チームの知見を発信する技術ブログのフロントエンドを設計・実装 外部メディアの記事・タグ・メンバー情報をSupabase上で集約し、Next.jsで高速配信 ◾️何をやったか トップページ実装: ヒーロー、メンバー紹介スライダー、タグ絞り込み、記事カード、 ページネーション データ取得基盤: SupabaseのRPCをNext.jsから呼び出し 更新性と配信速度の両立: SSG + ISRとトークン保護のオンデマンド再検証API UI/UX演出: IntersectionObserverでの文字アニメーション、カスタム水平スクロール 、レスポンシブ最適化 画像最適化: `next/image`の`remotePatterns`設定でSupabase Storageの公開画像を最 適表示 SEO/OGP: `app/layout.tsx`で`metadata`を設計(タイトル/ディスクリプション/OG画 像/Twitterカード) ◾️どうやったか(技術的アプローチ) アーキテクチャ: Next.js App Router構成、静的生成を強制しつつ日次ISR データ連携: 公開用SupabaseクライアントでCookieレスのSSG前提アクセスを実装 再検証API: AuthorizationヘッダーまたはJSONボディのトークンを検証し、対象パスのみ更新 絞り込み/ページング: タグの複数選択を状態管理し、クライアント側で記事配列をフ ィルタ+分割表示 アニメーションで遅延+スタッガー演出、SVGテキストの回転表現 メンバースライダー: カスタム水平スクロール+擬似スクロールバー(クリック/キー ボード対応)でアクセシビリティ配慮 スタイル: Tailwind CSS v4 + カスタムユーティリティ(スクロールバー、カードホバ ー、フォント変数) 型安全性: TypeScriptで記事/タグ/メンバーの型を定義し、Props/状 態を型付け ◾️工夫した点 高速配信と即時更新の両立: ISRを基本に、管理側からのオンデマンド再検証をAPIで安 全に実行 外部メディア横断の表現力: Zenn/Qiitaなどのソース種別に応じたアイコン/スタイル を自動切替 画像配信の安定性: Supabase Storageの公開URLをヘルパー関数化し、`next/image`最適化と両立 モバイル最適化: レイアウト/アニメーション/タップ領域をSP中心で調整し読了率向上 を意識 可読性と拡張性: セクションごとにコンポーネント分割し責務を明確化 ◾️使用技術 バックエンド(BaaS): `Supabase`(RPC, Storage, Publicクライアント) その他: `next/image`, `IntersectionObserver`, `@mui/icons-material` ◾️担当範囲 要件整理/UI設計/技術選定/実装/パフォーマンス・アクセシビリティ改善/デプロイ運 用設計(ISR+再検証フロー) ◾️成果と効果◾️ ビルド不要の安全なオンデマンド更新で運用負荷を低減 静的配信ベースにより初期表示を高速化、記事一覧の検索性・回遊性を改善 デザインとアニメーションでブランド体験を統一しつつ、読みやすさと操作性を両立