Tag
7 件の記事
元箱根駅伝ランナー・現役エンジニアが「Next.js 16」について書いた記事を、新しい順に並べています。
next/og (satori) で、同じ走行データから横カード・透過オーバーレイ・ストーリーの3レイアウトを出し分けた実装記録。-webkit-text-stroke が描かれない・blur が効かない・太字が作れないという制約の下で、多重ストロークの擬似ネオン、黒プレートによる視認性確保、78グリフの日本語サブセット同梱までをコードごと書く。走行時の天気を KV に固定した事故対応も。
Strava の Push Subscription を受けて、走り終わった直後に Slack と X へラン結果を自動投稿する実装記録。X API の OAuth 1.0a 署名を自前で組む話、280 weighted と Slack の 3000 文字で本文を出し分ける設計、Upstash KV のマーカーで二重投稿を止める仕組み、そして Slack が前日の画像を貼ってきた事故の原因と対策までコードごと書く。
iPhone の Health Auto Export から Bearer 認証つきの ingest API へ Apple Health を自動投入し、生 HAE JSON を1日1件に圧縮して Upstash KV に貯め、翌朝のコンディションとして表示するまでの実装記録。HAE V2 の object 形式の罠と、14日 z-score の自律神経スコアまでをコードごと解説する。
チャートライブラリを使わず、React と自前 SVG だけで継続ヒートマップ・心拍効率トレンド・散布図・トレーニング負荷チャートを描いた実装記録。集計を純粋関数に切り出してテストし、データ欠損時は length===0 で graceful に非表示にする設計、TRIMP / ACWR の算出までをコードごと解説する。
Vercel Hobby プランの Cron 2本制限を、1本の dispatcher Cron で複数ジョブを直列実行することで回避した実装記録。Strava 同期 → 当日ラン投稿 → 日曜だけ週次 → GitHub 同期 → progress bar を1リクエストで捌き、曜日判定は純粋関数に切り出し、cron 認証は timing-safe な Bearer 比較で守る構成をコードごと解説する。
Strava の encoded polyline を自前デコードし、地図タイルを一切使わずに走行軌跡を SVG アートとして描いた実装記録。全ランを1つの bbox に投影すると地元ランが点に潰れる問題を、開始地点の greedy クラスタリングとエリア別 bbox 投影で解いた過程をコードごと解説する。
Next.js 16 (App Router / Turbopack) と React 19、Tailwind v4、Zod、Upstash Redis、Vercel Cron、next/og を組み合わせて、毎朝03:45起床・12kmランの記録をリアルタイムに可視化し、X への自動投稿まで自動化した個人ダッシュボードの設計と実装を解説する。