'use client'
import useSWRImmutable from 'swr/immutable'
export function useSidebar() {
  const { data, mutate } = useSWRImmutable('sidebar-open', null, {
    fallbackData: true
  })
  return {
    isOpen: data ?? true,
    toggle: () => mutate(!data, false)
  }
}
// コンポーネントでの使用
export function Sidebar() {
  const { isOpen, toggle } = useSidebar()
  return (
    <aside className={isOpen ? 'open' : 'closed'}>
      <button onClick={toggle}>切り替え</button>
    </aside>
  )
}

import { createSearchParamsCache, parseAsInteger } from 'nuqs/server'
import type { PageProps } from 'next/types'
export const searchParamsCache = createSearchParamsCache({
  page: parseAsInteger.withDefault(1),
})
export default async function Page({ searchParams }: PageProps<'/users'>) {
  const { page } = await searchParamsCache.parse(searchParams)
  const users = await fetchUsers({ page })
  return <UserList users={users} page={page} />
}

'use client'
import { useQueryStates, parseAsInteger, parseAsString } from 'nuqs'
export function UserFilters() {
  const [{ page, query }, setFilters] = useQueryStates({
    page: parseAsInteger.withDefault(1),
    query: parseAsString.withDefault(''),
  })
  return (
    <input
      value={query}
      onChange={(e) => setFilters({ query: e.target.value, page: 1 })}
    />
  )
}