next-useparamstate simplifies the process of managing URL state in real time.
npm i next-useparamstateFirst, setup the useParamState global provider inside your app/layout.tsx:
import { ParamStateProvider } from "next-useparamstate";
export default function Layout() {
return (
<html>
<body>
<ParamStateProvider>{children}</ParamStateProvider>
</body>
</html>
);
}Finally, use either the useParamState or useParamStates hook:
"use client";
export default function Page() {
const [name, setName] = useParamState(
// Set the property name.
"name",
// Set the property default value.
// This value will only be used in the event that one is not already
// set inside of the URL.
"",
);
// Or, alternatively, for managing multiple state values at once.
const [persona, setPersona] = useParamStates({
hairColor: "brunette", // The value set here will be used as the default.
age: 35,
});
useEffect(() => {
console.log({ name });
console.log(persona);
}, [name, setPersona]);
// ...
}Now sit back and watch the magic!