url-state-management について
React 開発者向けに、nuqs で React の状態を URL クエリパラメーターと同期する方法を扱うスキルです。共有可能なフィルターや検索、ダイアログへのリンク、ブラウザー移動時の状態保持を説明します。
主な機能
- 01React 状態と URL クエリパラメーターの同期
- 02共有可能なフィルターと検索
- 03ダイアログへのディープリンク
- 04ブラウザー移動時の状態保持
活用シーン
- 01フィルターや検索状態の共有
- 02リンクから特定のダイアログを開く
- 03ブラウザー移動時の UI 状態復元
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/url-state-managementを入力して読み込まれたか確認します。
詳細
URL 状態管理
nuqs を使用して React の状態を URL クエリパラメーターに同期し、共有可能なフィルターや検索、ディープリンク可能なダイアログを実現します。
前提条件
以下のレシピを順番に完了してください。
Vercel 上の Next.js
Bun で動作する Next.js アプリを作成し、開発環境を構成して、プッシュ時に自動デプロイされるよう Vercel にデプロイします。
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nextjs-on-vercel
クックブック - 以下のレシピを順番に完了してください
nuqs を使った URL 状態管理
React の状態を URL クエリパラメーターに同期し、共有可能なフィルターや検索クエリ、モーダルダイアログへのディープリンクを実現します。ブラウザーの戻る／進む操作でも UI の状態を保持します。
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/nuqs-setup
URL 状態管理のパターン
nuqs を使用して URL クエリパラメーターで React の状態を管理します。Suspense 境界、パーサー、状態のクリア、ディープリンク可能なダイアログについて説明します。
bunx skills add andrelandgraf/fullstackrecipes/skills -s url-state-patterns
コメント
Markdown 対応