URL State 管理

'use client'
import { useSearchParams, useRouter, usePathname } from 'next/navigation'
 
export function ModelFilter() {
  const searchParams = useSearchParams()
  const router = useRouter()
  const pathname = usePathname()
 
  const model = searchParams.get('model') ?? 'all'
 
  function updateParam(key: string, value: string | null) {
    const params = new URLSearchParams(searchParams.toString())
    value ? params.set(key, value) : params.delete(key)
    router.push(`${pathname}?${params.toString()}`)
  }
 
  return (
    <select value={model} onChange={(e) =>
      updateParam('model', e.target.value === 'all' ? null : e.target.value)
    }>
      <option value="all">全部模型</option>
      <option value="gpt-4o">GPT-4o</option>
      <option value="claude-3.5-sonnet">Claude 3.5</option>
    </select>
  )
}

import { Suspense } from 'react'
 
export default function ChatPage() {
  return (
    <div>
      <Suspense fallback={<FilterSkeleton />}>
        <ModelFilter />
      </Suspense>
      <ChatList />
    </div>
  )
}

// app/(dashboard)/chat/page.tsx — Server Component
export default async function ChatPage({
  searchParams,
}: {
  searchParams: Promise<{ model?: string; sort?: string; page?: string }>
}) {
  const { model, sort = 'newest', page = '1' } = await searchParams
 
  const chats = await db.query.chats.findMany({
    where: model ? eq(chats.model, model) : undefined,
    orderBy: sort === 'newest' ? desc(chats.updatedAt) : asc(chats.updatedAt),
    limit: 20,
    offset: (Number(page) - 1) * 20,
  })
 
  return <ChatList chats={chats} />
}

'use client'
import { useQueryState, parseAsInteger, parseAsStringEnum } from 'nuqs'
 
export function ChatFilters() {
  // 像 useState 一样用，但状态存在 URL 中
  const [query, setQuery] = useQueryState('q', {
    defaultValue: '',
    throttleMs: 300, // 搜索框防抖 300ms
  })
 
  // 整数类型：自动 string → number 转换
  const [page, setPage] = useQueryState('page', parseAsInteger.withDefault(1))
 
  // 枚举类型：只允许指定值，其他值自动回退默认值
  const [sort, setSort] = useQueryState(
    'sort',
    parseAsStringEnum(['newest', 'oldest', 'most-messages']).withDefault('newest'),
  )
 
  return (
    <div className="flex gap-4">
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value || null)} // null 会移除 ?q= 参数
        placeholder="搜索对话..."
      />
      <select value={sort} onChange={(e) => setSort(e.target.value as any)}>
        <option value="newest">最新</option>
        <option value="oldest">最旧</option>
        <option value="most-messages">最多消息</option>
      </select>
      <button onClick={() => setPage(page + 1)}>下一页（当前：{page}）</button>
    </div>
  )
}
// URL: /chat?q=nextjs&sort=oldest&page=2
// 默认值时自动省略参数 → /chat（干净的 URL）

import { useQueryStates, parseAsInteger, parseAsString } from 'nuqs'
 
export function ChatFilters() {
  const [filters, setFilters] = useQueryStates({
    q: parseAsString.withDefault(''),
    model: parseAsString,
    sort: parseAsString.withDefault('newest'),
    page: parseAsInteger.withDefault(1),
  })
 
  function handleModelChange(model: string) {
    // 切换模型时同时重置页码 — 一次 URL 更新
    setFilters({ model: model || null, page: 1 })
  }
 
  function handleReset() {
    // 重置所有筛选 — null 移除参数
    setFilters({ q: null, model: null, sort: null, page: null })
  }
 
  return (
    <div>
      <input
        value={filters.q}
        onChange={(e) => setFilters({ q: e.target.value || null, page: 1 })}
      />
      <select
        value={filters.model ?? 'all'}
        onChange={(e) => handleModelChange(e.target.value === 'all' ? '' : e.target.value)}
      >
        <option value="all">全部</option>
        <option value="gpt-4o">GPT-4o</option>
      </select>
      <button onClick={handleReset}>重置筛选</button>
    </div>
  )
}

// app/(dashboard)/chat/search-params.ts — 定义一次
import { createSearchParamsCache, parseAsInteger, parseAsString } from 'nuqs/server'
 
export const searchParamsCache = createSearchParamsCache({
  q: parseAsString.withDefault(''),
  model: parseAsString,
  sort: parseAsString.withDefault('newest'),
  page: parseAsInteger.withDefault(1),
})

// app/(dashboard)/chat/page.tsx — Server Component 使用
import { searchParamsCache } from './search-params'
 
export default async function ChatPage({
  searchParams,
}: {
  searchParams: Promise<Record<string, string | string[] | undefined>>
}) {
  // 类型安全的解析：page 自动变成 number，sort 有枚举检查
  const { q, model, sort, page } = searchParamsCache.parse(await searchParams)
 
  const chats = await getFilteredChats({ q, model, sort, page })
 
  return (
    <div>
      <ChatFilters />
      <ChatList chats={chats} />
      <Pagination page={page} />
    </div>
  )
}

useQueryState('q', { defaultValue: '', history: 'replace' }) // 搜索用 replace
useQueryState('page', parseAsInteger.withDefault(1))          // 分页用 push（默认）