Next.jsでクエリパラメータを動的に付与する
Next.js
タブ切り替えでパラメーターを切り替える例
const handleTabClick = (tab: UserCategoryTab): void => { setCategoryId(tab.categoryId); setMemoPage(1); setMemoHasMore(true); setMemos([]); setTabs((prevTabs) => prevTabs.map((prevTab) => ({ ...prevTab, isSelected: prevTab.id === tab.id, })) ); updateSearchParams({ tab: tab.id.toString(), }); };
const updateSearchParams = useCallback(
(newParams: Record<string, string>): void => {
const current = new URLSearchParams(Array.from(searchParams.entries()));
Object.entries(newParams).forEach(([key, value]) => {
if (value === null || value === '') {
current.delete(key);
} else {
current.set(key, value);
}
});
router.replace(`${pathname}?${current.toString()}`);
},
[pathname, router, searchParams]
);