CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-nuqs

Type-safe search params state manager for Next.js - Like React.useState, but stored in the URL query string

Overall
score

96%

Overview
Eval results
Files

task.mdevals/scenario-1/

Product Filter Page

Build a Next.js Server Component page that accepts and validates URL search parameters for product filtering. Invalid parameters must cause validation errors.

Requirements

Create a server-side page at /app/products/page.tsx that:

  1. Accepts these URL query parameters:

    • category - one of: "electronics", "books", "clothing", or "toys"
    • minPrice - a positive integer
    • maxPrice - a positive integer
    • inStock - a boolean value
    • page - a positive integer (defaults to 1)
  2. Validates parameters on the server with strict validation enabled. Invalid values must throw errors, not return null.

  3. Displays the validated parameters in the page:

    • Selected category (if provided)
    • Price range (if minPrice/maxPrice provided)
    • Stock filter (if inStock provided)
    • Current page number

Test Cases

  • Valid URL with all parameters: ?category=electronics&minPrice=100&maxPrice=500&inStock=true&page=2 should display all filter values @test

  • Valid URL with partial parameters: ?category=books&page=1 should display only the provided values @test

  • Invalid category value: ?category=furniture should throw a validation error @test

  • Invalid price value: ?minPrice=abc should throw a validation error @test

@generates

Dependencies { .dependencies }

nuqs { .dependency }

Provides type-safe URL search parameter state management with server-side parsing and validation.

Install with Tessl CLI

npx tessl i tessl/npm-nuqs

tile.json