I am working on a multilingual next js 13 app with "app directory". I have a page like "/products", where I will be filtering the page data with URLSearchParams. I have created a client side component for filtering the data in a separate file. I am pushing the route from the filter component in this way: "http://localhost:3001/en/products?accessories=led-light--switch". I want to access the query params from "page.tsx" which is a server side file. According to the doc I have the access to "searchParams", but when I am pushing the routes "searchParams" is showing empty but it works after refreshing the page. How can I get the query params after pushing the routes from server side ?
Filter component code:
const onChangeHandler = (e: React.ChangeEvent) => {
const { name, value, checked } = e.target;
const newValues = checked ? [...checkBoxValues, value] : checkBoxValues.filter((val) => val !== value);
setCheckBoxValues(newValues);
if (newValues.length === 0) {
params.delete(name); // Remove the entire 'jobType' key from the params
} else {
params.set(name, newValues.join("--")); // Set the new values for 'jobType' key
}
router.push(pathname + (params.toString() ? "?" + params.toString() : ""));
};
page.tsx file
export default async function IndexPage({
params: { lang },
searchParams,
}: {
params: { lang: Locale };
searchParams: any;
}) {
const data = await getData(variables.apiUrls.product);
const dictionary = await getDictionary(lang);
let customMeta = {
...data.data.meta,
title_en: data.data.meta.title_en.length > 0 ? data.data.meta.title_en : translateText(lang, data.data),
title_bn: data.data.meta.title_bn.length > 0 ? data.data.meta.title_bn : translateText(lang, data.data),
};
return (
<BaseLayout navigationType="others" lang={lang} meta={customMeta}>
<ProductIndex lang={lang} dictionary={dictionary} />
</BaseLayout>
);
}