nino
  • ドキュメント
  • レジストリ
  • メンバーシップ

Command Palette

Search for a command to run...

スポンサー
メニュー

Search Params Dialog

 

1分 14秒

Search Params を利用してダイアログを表示することで、リロード時にダイアログの状態を再現できます。また、階層を意識せず状態を管理できるため、コンポーネントを再利用しやすくなります。

ライブデモ

依存のインストール

Loading...

ダイアログの作成

Loading...

リストの作成

Loading...

ページの作成

Cache Component において Search Params を利用する場合、 <Suspense> でラップする必要があります。

Loading...
Discord で質問する
何か気になったこと、分からないことがあれば気軽に質問してください！
DiscordDiscordで質問する
nino

Developer

XXGitHubGitHubYouTubeYouTubeZennZennDiscordDiscord

    リンク

  • ドキュメント
  • レジストリ
  • アーキテクチャ

    ツール

  • フィード
  • ステータス

    ポリシー

  • 利用規約
  • プライバシーポリシー
  • 特定商取引法に基づく表示
ドキュメント
はじめに
  • Changelog
ガイド
  • Webアプリの環境構築
  • ニュース収集&AI要約
  • Turso のテーブル移行
  • 日時の管理
  • 中規模のリストをブラウザにキャッシュし、クライアントでフィルタする
  • Search Params Dialog
  • コードの整理
  • AGENTS.md
  • Better Auth
  • プロダクト開発ポリシー
  • 推奨ツール
  • Proxy.ts
  • 多言語対応
  • SWR
  • Cache Component
  • Next.js の課題、不具合
  • アプリ開発フロー
  • プロンプトガイド
  • CSS Tips
  • Font Family
  • セルフブランディング
  • セルフオンボーディング
  • オフィスツール
  • Email
  • Breadcrumb（パンくず）
  • 並べ替え
pnpm add nuqs
import { useQueryState } from "nuqs";

export function SearchParamsDialog() {
  const [id, setId] = useQueryState("id");
  const [post, setPost] = useState<Post | null>(null);

  useEffect(() => {
    // ダイアログが閉じる際、コンテンツの消滅を回避しています
    if (id !== null) {
      getPost(id).then((result) => {
        setPost(result);
      });
    }
  }, [id]);


  return <Dialog open={id !== null} onOpenChange={() => setId(null)}>
    <DialogContent>
      <DialogHeader>
        <DialogTitle>{post?.title}</DialogTitle>
      </DialogHeader>
      <p>{post?.body}</p>
    </DialogContent>
  </Dialog>;
}
import { useQueryState } from "nuqs";

export function List() {
  const [id, setId] = useQueryState("id");
  return <div className="flex gap-2 flex-wrap">
    {items.map((item) => (
      <Button key={item} onClick={() => setId(item.toString())}>
        {item}
      </Button>
    ))}
  </div>;
}
import { Suspense } from "react";
import { SearchParamsDialog } from "./dialog";
import { List } from "./list";

export default function Page() {
  return <div className="space-y-4 container py-10 flex justify-center">
    <Suspense>
      <List />
      <SearchParamsDialog />
    </Suspense>
  </div>;
}