Why URL state with searchParams in NextJS? - Purpose & Use Cases

The Big Idea

Discover how a simple tool can save you from messy URL bugs and make your app feel magical!

The Scenario

Imagine you have a website where users can filter products by category and price. You try to update the URL manually every time a filter changes by concatenating strings and handling question marks and ampersands yourself.

The Problem

Manually building and parsing URLs is tricky and error-prone. You might forget to encode values, mix up separators, or create invalid URLs. This leads to bugs and a bad user experience.

The Solution

Using URLSearchParams lets you easily read and update query parameters in the URL without worrying about formatting. It handles encoding and separators for you, making your code cleaner and more reliable.

Before vs After

✗ Before

const url = '/products?category=' + category + '&price=' + price;

✓ After

const params = new URLSearchParams({ category, price });
const url = '/products?' + params.toString();

What It Enables

You can keep the URL in sync with app state effortlessly, enabling bookmarking, sharing, and back/forward navigation that just works.

Real Life Example

On an e-commerce site, users can filter items and share the exact filtered view URL with friends, who see the same filters applied immediately.

Key Takeaways

Manual URL handling is complex and error-prone.

URLSearchParams simplifies query parameter management.

It improves user experience by syncing URL and app state cleanly.