Next.js Discord

Discord Forum

Next,js 14 -> 15 query params behaviour

Unanswered
Ocicat posted this in #help-forum
Open in Discord
OcicatOP
Hi all,
I have a searchbar component that updates the URL , In Next,js 14 it was smooth, working fine. Now, in Next,js 15, the whole page flickers on every keystroke.

What, if anything, changed?

Any guidance would be appreciated.

``typescript const Searchbar = ({ label }: SearchBarProps) => { const router = useRouter(); const pathName = usePathname(); const existingSearchParams = useSearchParams(); const existingSearchBarSearchParams = existingSearchParams.get(label); const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => { const newSearchParams = new URLSearchParams(existingSearchParams); newSearchParams.set(label, event.target.value); const newQueryString = newSearchParams.toString(); const newURL =${pathName}?${newQueryString}`;
router.replace(newURL);
};

return (
<div className="flex h-full">
<div className="flex items-center space-x-1">
<FieldLabel text={"search:"} />
<div className="flex items-baseline">
<input
type="text"
id="searchBar"
onChange={handleOnChange}
value={existingSearchBarSearchParams as string}
className="h-4 w-full appearance-none border-b border-black bg-neutral-300 pb-[.1rem] font-aperçu font-bold focus:border-b focus:outline-none dark:border-[#D9D9D9] md:text-xs"
/>
</div>
</div>
</div>
);
};

0 Replies