kstack-nuqs

nuqs で URL の state を書くときの規約。理由を理解した上で適用すること。コンポーネントの構成は kstack-react、NuqsAdapter を TanStack Router に繋ぐ位置は kstack-tanstack-router の SKILL を参照。

URL を共有して同じ表示になる state は URL に持つ

state は、URL を共有したときに同じ表示を再現したいかどうかで置き場所を分ける。

state	置き場所
URL を共有すれば同じ表示になるもの（選択中の項目、フィルタ、タブ、期間）	URL のクエリ（nuqs）
URL に含めない、画面をまたぐもの	zustand などの store
1 つの component で閉じるもの（複数同時に開ける行の開閉など）	`useState`

// Bad: 共有したいフィルタを store に持っている。リンクを共有してもリロードしても失われる
const useFilterStore = create(() => ({ category: "all", sort: "new" }));