<empty query>

Basic counter

State is stored in the URL query string

client.tsxSource on GitHub

'use client'

import { Button } from '@/src/components/ui/button'
import { Minus, Plus } from 'lucide-react'
import { parseAsInteger, useQueryState } from 'nuqs'

export default function BasicCounterDemoPage() {
  const [counter, setCounter] = useQueryState(
    'counter',
    parseAsInteger.withDefault(0)
  )
  return (
    <>
      <nav className="my-8 flex flex-wrap items-center gap-4">
        <Button onClick={() => setCounter(x => x - 1)}>
          <Minus />
        </Button>
        <Button onClick={() => setCounter(x => x + 1)}>
          <Plus />
        </Button>
        <Button onClick={() => setCounter(null)}>Reset</Button>
        <span className="text-2xl font-semibold tabular-nums">
          Counter: {counter}
        </span>
      </nav>
    </>
  )
}