Deviopath › Next.js

Sort Select in the URL

Medium · Search Params

Sorting is a good fit for the URL too: /products?category=home&sort=price-asc can be bookmarked and shared.

Update SortedProducts:

- The sort comes from ?sort=. Valid values are name (A to Z), price-asc and price-desc. A missing or unknown value means name.

- Make the <select> **controlled** by the URL value (value={sort}), so it shows the right option when the URL changes.

- On change, router.push a URL that keeps the other params and sets sort (always set it, also for name). Copy the read-only search params with new URLSearchParams(searchParams) first, and build the URL with usePathname().

- Render the products as <li> items (just the name) in the chosen order.

Next: Redirect After Logout