Next.js + Supabase の記事一覧
修正フォームの近くに参考情報を表示して入力ミスを減らすパターン
過去データの修正フォームで、判断材料になる参考情報を入力欄の近くに表示する実装パターンを解説します。
前回作業日の未完了データを入口画面で補正するUIパターン
退勤忘れや入力途中のデータを、次回利用時に入口画面で補正できるようにするNext.js + SupabaseのUI設計パターンを解説します。
Next.js + SupabaseでOAuthログイン後にcallback routeを挟む実装パターン
Google OAuthログイン後に1回目だけ保護ページへ入れない問題を、Next.js App Routerのcallback routeで解決する実装パターンを解説します。
Next.js静的サイトにDBなしのサイト内検索を追加する方法
Next.jsの静的サイトで、記事・用語集・開発事例をビルド時に検索データ化し、ブラウザ側で横断検索する実装パターンを紹介します。
Next.jsでOGP / Twitter Cardを設定してSNSリンクプレビューを整える
XやSNSにURLを貼ったときに、タイトル・説明文・画像付きカードを表示するためのNext.js Metadata API設定パターンを解説します。
Vercelセキュリティインシデントを受けて、Next.js + Supabaseアプリの安全性を全点検してみた
2026年4月のVercelセキュリティインシデントを受けて、Next.js + Supabaseで運用中の個人アプリ「らくログタスク」のセキュリティを5項目でチェック。結果は全項目安全。チェック方法をそのまま共有します。
ライブラリ不要の月別カレンダーグリッドを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設定なしでシェア機能が作れます。