URL State Management Pattern

Manage application state in URL search parameters for shareable, bookmarkable pages with type-safe parsing.

What's Included#

  • Reusable useUrlState hook for reading and writing URL search parameters
  • Typed URL state with Zod schema validation and default values
  • Pagination component driven entirely by URL parameters
  • Filter interface with search, category, price range, and sort via URL state
  • Server Component integration for reading URL params in server-side queries
  • Support for array parameters, replace vs push navigation, and clearing filters

Usage#

Via CLI#

Loading code block...

Via AI Assistant#

Ask your AI assistant:

  • "Use the URL state management pattern from Bootspring"
  • "Apply the Bootspring URL state pattern to my project"

Key Considerations#

  • Reset pagination to page 1 whenever filters change to avoid empty result pages
  • Use router.replace for frequently changing values like search input to avoid polluting history
  • Always validate URL parameters on the server since users can manually edit URLs
  • Remove empty parameters from the URL to keep URLs clean and readable
  • Provide sensible defaults for all parameters so pages work without any query string