Where should filter, sort, and page state live so a shared link reproduces the view?
Keep filter, sort, and page state in the URL query string so a shared link rebuilds the exact view and a refresh does not wipe it.
The URL is the source of truth
If filters and the current page live only in component state, a refresh wipes them and a shared link drops the recipient on the default view. Move that state into the query string so the URL fully describes what the user is looking at.
My list view has [list your filters, sort, and page state]. How do I store all of it in the URL query string in a Next.js App Router page so a refresh and a copied link both rebuild the exact same view?
No second copy in local state
The trap is copying the URL into a useState and then syncing the two by hand. Read filters and page straight from the query string, and write every change back to the URL only. With one source, the address bar, the screen, and the back button stay in sync on their own.
My list page mirrors [filter or page value] in a useState that I sync with the URL. How do I drop the local copy, read directly from the query string, and write changes back so the back button still steps through previous views?
Let the URL query string own filter, sort, and page state. A refresh holds, a shared link reproduces the exact view, and the back button just works.
Additional Resources
Explore these carefully curated resources to deepen your understanding and practice the concepts covered in this lesson.
Next.js useSearchParams
DocumentationRead and react to query string values so the URL can be the single source of truth for list state.
https://nextjs.org/docs/app/api-reference/functions/use-search-params
nuqs
DocumentationType-safe search params state for Next.js that syncs filter, sort, and page values to the URL for you.
https://nuqs.dev