Next,js 14 -> 15 query params behaviour
Unanswered
Ocicat posted this in #help-forum
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.
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>
);
};
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>
);
};