or run

tessl search
Log in

Version

Files

tile.json

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.