Next.js + Supabase の記事一覧
ライブラリ不要の月別カレンダーグリッドをCSS Gridで実装する
ライブラリ不要でCSS Grid（grid-cols-7）を使った月別カレンダーの実装パターン。
Reactでドロップダウンを外クリックで閉じる方法（useRef + mousedown）
useRefとmousedownイベントでカスタムドロップダウンを外側クリックで閉じるパターン。
TailwindでDB由来の色を動的に適用する方法（HEX→RGBA変換）
Tailwind CSSでDBに保存したHEXカラーコードを動的に適用する方法。RGBA変換関数付き。
初回オンボーディングをlocalStorageで制御する方法（React）
初回利用時だけガイドモーダルを表示し、次回以降は抑制するパターン。localStorage制御。
Next.js + Supabase Authで認証ガードを実装する方法（Middleware）
Next.js App RouterとSupabase Authでミドルウェア認証ガードを実装。Google OAuth対応。
Reactでライブラリ不要のトースト通知を実装する方法
ライブラリ不要でsetTimeoutによる自動消去トースト通知を実装。成功/エラーの色分けも。
Next.js + Supabaseで自動保存を実装するパターン（localStorage併用）
保存ボタン不要の自動保存パターン。SupabaseとlocalStorageの使い分けと楽観的更新の実装方法を解説。
ライブラリ不要！CSSだけでガントチャート（タイムライン）を描画する方法
外部ライブラリなしでCSSのパーセント指定だけでタイムライン表示を実装。作業履歴の時系列表示に最適です。
Reactでインライン削除確認UIを実装する方法（モーダル不要）
モーダルを使わずにインラインで削除確認を表示するパターン。スマホでも操作しやすいUXを実現。
Next.jsでライブラリ不要のヒートマップを実装する方法（曜日×時間帯）
HTMLテーブルとCSSだけで曜日×時間帯のヒートマップを描画。ライブラリ不要でコピペですぐ使えるコード付き。
Promise.allでSupabaseクエリを並列化してページ表示を高速化する方法
複数のSupabaseクエリをPromise.allで並列実行し、ページの読み込み時間を劇的に短縮するテクニックを紹介します。
Rechartsの円グラフ(PieChart)でスライス内にパーセントを表示する方法
Rechartsの円グラフでスライス内にパーセント表示するカスタムラベルの実装方法。コピペで使えるコード付き。
Next.jsでJavaScriptによるレスポンシブ判定（isMobile）を実装する方法
TailwindのCSSだけでは対応できない描画ロジックの分岐に。matchMediaを使ったisMobile判定フックの実装。
SheetJSでブラウザからExcelファイルをエクスポートする方法
SheetJS(xlsx)を使い、ブラウザだけでExcelファイルを生成・ダウンロード。複数シートや時間型の扱いも解説。
Supabaseで1000件以上のデータを全件取得するページネーション実装
Supabaseのselect()は最大1000行制限。range()を使ったループで全件取得するパターンを紹介します。
OAuth不要！X（Twitter）Intent URLでポストボタンを実装する方法
OAuth不要でXへのポストボタンを実装。Intent URLを使えばAPI設定なしでシェア機能が作れます。