---
description: Standards for handling search params with nuqs in Next.js
globs:
alwaysApply: false
---
# Search Params Pattern
Standards for handling search params with nuqs in Next.js. Auto-included for searchParams.ts files.
<rule>
name: search_params_pattern
description: Standards for handling search params with nuqs in Next.js. Auto-included for searchParams.ts files.
globs: ["app/**/**/searchParams.ts"]
filters:
- type: file_extension
pattern: "\.ts$"
- type: file_name
pattern: "searchParams\.ts$"
actions:
- type: suggest
message: |
Follow these standards for handling search params:
1. Search Params Configuration:
- Define parsers separately in an exported object
- Use descriptive names for parser objects
- Export searchParamsCache using the parsers object
2. File Structure:
``<code>typescript
import { createSearchParamsCache, parseAsString } from "nuqs/server";
3. export const myParsers = {
param1: parseAsString.withDefault(""),
param2: parseAsString.withDefault(""),
};
4. export const searchParamsCache = createSearchParamsCache(myParsers);
</code>``
5. Page Component:
- Import SearchParams type and searchParamsCache
- Parse search params in the page component
- Don't pass search params as props to client components
6. Client Components:
- Import useQueryStates from nuqs
- Import parsers from searchParams.ts
- Use useQueryStates hook to access search params directly
examples:
- input: |
// Bad: Inline parser definition
export const searchParamsCache = createSearchParamsCache({
param: parseAsString,
});
- // Good: Separate parser definition
export const myParsers = {
param: parseAsString.withDefault(""),
};
export const searchParamsCache = createSearchParamsCache(myParsers);
output: "Define parsers separately for reuse in client components"
- input: |
// Bad: Passing search params as props
const { param } = await searchParamsCache.parse(searchParams);
return <MyComponent param={param} />;
- // Good: Using useQueryStates in client component
const [{ param }] = useQueryStates(myParsers);
output: "Use useQueryStates in client components instead of passing search params as props"
metadata:
priority: high
version: 1.0
</rule>
