Next.js Webアプリ の記事一覧
CSS Gridのminmaxとmax-widthで列幅を可変にし、最大幅で頭打ちにする
CSS Gridのminmaxで列の最小幅を守りながら均等に伸縮させ、コンテナのmax-widthで広い画面の最大幅を制御する方法を解説します。
設定値をGASスクリプトプロパティとNext.js管理画面で運用する
料金や通知時刻をコードへ埋め込まず、GASスクリプトプロパティを保存元にしてNext.js管理画面から安全に更新する設計を解説します。
単独管理者向けの軽量HMAC Cookie認証をNext.jsで実装する
単独管理者向けの小規模アプリで、Web CryptoによるHMAC署名付きCookieとMiddlewareを使った軽量認証を実装する方法を解説します。
Next.jsとGASスプレッドシートDBで予約アプリを作る構成
Next.jsを画面と中継サーバー、GAS Web APIとGoogleスプレッドシートをデータ層に使う、小規模予約アプリの構成と実装ポイントを解説します。
mutation後のrouter.refreshで条件分岐ビューが反転する問題と対策
Next.js App Routerで書き込み後にrouter.refreshを実行すると、サーバー側の条件分岐が変わり成功画面が消える問題と、安全な遷移方法を解説します。
VercelのGit連携を後付けしたとき空コミットで初回デプロイする方法
Vercelへ手動デプロイした後にGitHubリポジトリを連携し、最新コミットが自動デプロイされないときの切り分け方と、空コミットで安全に初回デプロイを発火させる手順を紹介します。
30分コマの週グリッド予約UIをNext.jsで実装する
日付と30分コマを週グリッドで表示し、連続選択、予約済み表示、移動時間バッファ、締切、料金計算へ対応する設計を解説します。
修正フォームの近くに参考情報を表示して入力ミスを減らすパターン
過去データの修正フォームで、判断材料になる参考情報を入力欄の近くに表示する実装パターンを解説します。
前回作業日の未完了データを入口画面で補正する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設定なしでシェア機能が作れます。