【Next.js / React】URLのクエリパラメータで状態を指定する 【Recoil / Jotai】

現在表示しているページを、URLだけで再現できるようにしたい

今個人で開発中のアプリで、上記の機能がどうしても欲しいと考えていました。
例えば
https://myapp.com/?name="taro"
でアクセスしたら、 name のステートの値が "taro" になっている状態にしたい。という具合です。

Recoil

元々手軽なので Recoil で状態管理をしていました。 Recoil 自体にそういった機能がないのか調べていたところ recoil-sync なるものがあるらしく、
早速使ってようと思ったのですが、まだ未実装のようです。 (ドキュメントにはあるのですが)

use-query-params

というわけで別のライブラリを探していたところ、 use-query-params を使ってやる手法もあるそうで、
それを色々触っていたのですが、Next.js で動かすようにするには工夫が必要らしく、
next-query-paramsというパッケージもあるそうなのですが、結構ややこしそうなので、手軽にできるライブラリを探しました。

Jotai

そうすると、 Jotai というライブラリーがかなり直感的で利便性が高いそうなので、これを用いることにしました。
使い方も recoil とほとんど同じ。
以下、こんな感じで使えます。(recoilの使い方を知っている人向け)

_app.tsx

import { Provider as JotaiProvider } from "jotai";
...
      <JotaiProvider>
        <Component {...pageProps} />
      </JotaiProvider>

src/state/jotai/hoge.ts

import { atom } from "jotai"

export const hogeState = atom("defaultの値")

src/components/foo.tsx

import { useAtom } from "jotai";
import { hogeState } from "@/state/jotai/hoge"

export const Foo = () => {
  const [hoge, setHoge] = useAtom(hogeState)
  ...

上記は Recoil の基本的な使用方法を Jotai で置き換えただけに過ぎません。
ここで、 atom の書き方を以下のように変更するだけで、状態を自動的にURLへ反映してくれます。

src/state/jotai/hoge.ts

import { atomWithHash } from "jotai/utils";

export const hogeState = atomWithHash('hogeHoge',"defaultの値");

このようにした後に、例えば setHoge(100) などで値を変更すると、
http://localhost:3000/#hogeHoge=100
のようにURLへ反映されます。

また、このURLを用いてアクセスすると、 hoge が 100 の状態でそのページがレンダリングされます。
すごい手軽です！！

結論

Jotai とっても便利！
Recoil でも似たような機能が実装されそうなので、それができたらそっちも触ってみたいです。

参考