0

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>
  );
}

0 Answers0