Product Filter Dashboard

Build a Next.js product filtering dashboard that manages filter state through URL query parameters. The dashboard should support three filter types: category tags, price range, and sorting preferences.

Requirements

Filter State Management

The dashboard must maintain the following filter state in the URL:

1. Category Tags: Multiple category tags (e.g., "electronics", "clothing", "books") stored as separate query parameters with the same key (e.g., ?category=electronics&category=clothing)
2. Price Range: A JSON object containing min and max numeric values for price filtering (e.g., ?priceRange={"min":10,"max":100})
3. Sort Criteria: A comma-separated list of sort options (e.g., ?sort=price,rating,name)

Component Structure

Create a React component ProductFilters that:

• Reads filter values from URL query parameters and displays them
• Provides buttons or inputs to modify each filter type
• Automatically updates the URL when any filter changes
• Displays the current state of all three filters

Functional Requirements

1. Category Selection: Provide controls to add/remove category tags (suggested categories: "electronics", "clothing", "books", "toys"). Each tag should be a separate query parameter
2. Price Range: Provide inputs for minimum and maximum price. Store both values as a single JSON object in the URL query string
3. Sort Criteria: Provide controls to toggle sort options (suggested: "price", "rating", "name", "date"). Store active options as a comma-separated value in the URL
4. Clear Filters: Provide a button that removes all three filter parameters from the URL

Technical Constraints

• Use Next.js App Router (React Server Components compatible)
• All filter state must be persisted in URL query parameters
• The component must handle invalid or missing URL parameters gracefully
• Type safety should be enforced for the price range object structure

Test Cases

The following test cases must be implemented:

• Category tags can be added and removed, and the URL is updated with multiple values @test
• Price range object is correctly serialized to and parsed from the URL @test
• Sort criteria list is properly maintained as a comma-separated string in the URL @test
• Clearing all filters removes all query parameters from the URL @test

Implementation

@generates

The test file should be created at:

@generates

Dependencies { .dependencies }

nuqs { .dependency }

Type-safe search params state manager for React frameworks. Provides hooks for managing URL query string state.

next { .dependency }

React framework for building full-stack web applications.

react { .dependency }

JavaScript library for building user interfaces.

@testing-library/react { .dependency }

Testing utilities for React components.