[tech-seed] [TOC検証] Next.js / Supabase / Vercel で作る tech ブログの設計と運用
- 公開日
- 更新日
本記事は技術ブログの目次(TOC)動作検証用の長尺サンプルです。h2 を 5 本、h3 を 8 本含めており、右カラムの sticky 目次がスクロール追従でアクティブ見出しを切り替える挙動を確認できます。モバイル幅では本文先頭にインライン目次が表示されます。
背景と目的
自社の技術知見を継続的に発信するため、既存のコーポレートブログとは独立したサブドメイン(tech.trex-group.com)を立ち上げました。読者は主に採用候補のエンジニアで、流し読み・後追い検索の両方に耐える構成が求められます。
読者像
採用候補のエンジニアは「会社の技術選定の思想」と「現場の判断の生々しさ」の双方を求めます。記事のトーンは抑制的に、しかし固有名詞や数値はできるだけ出すのが重要です。
サイト構成の方針
1 記事 800〜1300 字、見出しは 3〜4、各見出しに具体例を 1 つ。CTA は末尾の「Join the team」セクションに集約し、本文中の過度な誘導は避けます。
アーキテクチャの全体像
Next.js App Router(force-static + ISR)を Vercel に載せ、コンテンツは既存の Supabase Postgres を共有しています。スキルタクソノミーは別プロジェクト(HCM)から日次 Cron で同期しています。
ルーティング設計
app/(tech)/tech/* の Route Group で tech 専用 layout を持ち、data-site="tech" でテーマを切り替えています。canonical URL は corp host 経由で出すことで FB の OG scrape blacklist を回避しています。
データソース
記事本体は blog_posts をそのまま流用し、category が technology のものを tech 側で表示します。タグは HCM 由来の skills_master を中間テーブル post_skills で関連付け、保存時に本文から alias マッチで自動付与します。
パフォーマンスとキャッシュ
すべての公開ページに export const dynamic = "force-static" + revalidate = 60 を付与し、OGP クローラ互換と CDN ヒット率を両立しています。動的 OG 画像も同様に静的化対象です。
画像とフォントの最適化
OGP 画像は Storage 直リンクを最優先、未設定時のみ satori で動的生成にフォールバックします。Web フォントは Noto Sans JP + system mono の組合せに最小化しています。
Cache-Control の明示
Vercel の Dynamic ルートは既定で private, no-store が付くため、force-static で ISR 化することで public, s-maxage=N, stale-while-revalidate が emit されます。
運用ワークフロー
記事の執筆は管理画面の Tiptap エディタで、保存時に sanitize-html を通した HTML が DB に保存されます。プレビューモーダルで公開時とほぼ同等の見た目(目次つき)を確認できます。
レビューと公開
編集者と執筆者のレビュー往復は GitHub Issue ではなく管理画面のステータス遷移で完結します。公開直前に「サムネ / 抜粋 / カテゴリ / タグ」の 4 点を確認します。
力を抜いたほうが、続けられる記事になる。読み手の集中力を 5 分以内に閉じる前提で書く。
これからの拡張
Phase 2 では /search の全文検索、Phase 3 では著者プロフィールページと購読導線を予定しています。読者層を見ながら、必要なものから順に。
長尺記事の TOC 動作はこのページで確認できます。サイドバーの目次項目のアクセント色が、スクロールに応じて切り替わることをご確認ください。