Hello !

I am using next 13. I am getting the the above error.

I am fetching data based on the current slug. the slug is dynamic i have named the files as [...slug].tsx and I need to fetch data from the server. its for the translation. and from the client as well.

here is the code for fetching translation.

export const getServerSideProps = async ({ locale } : {locale: string}) =>  {
  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'en', [
        'header',
        'footer'
          ]
      )),
    },
  }
}

what am i missing ?

more code

const Page = () => {
  const router = useRouter();
  const slug = router.asPath;

  const { data, isLoading, error } = useQuery({
    queryKey: [slug],
    queryFn: () => {
      return PageService.fetchPublicPageData('fetching data based on current slug');
    },
    enabled: slug !== undefined && slug !== '/[...slug]',
  });


  if (data) {
    const { title_in_english, title_in_nepali, page_type } = data;
    const title = router.locale === 'np' ? title_in_nepali : title_in_english;
    const handlePageWiseContent = () => {
      switch (page_type) {
        case 'REPORT':
          return <ReportTypePageComponent data={data} />;
        case 'PDF-VIEWER':
          return <PDFTypePageComponent data={data} />;
        default:
          return <WYSWYGTypePageComponent data={data} />;
      }
    };

    return (
         <div className="container flex flex-col gap-3">
            <h1 className={'text-2xl sm:text-3xl font-bold noto-fonts mb-5'}>{title}</h1>
            {handlePageWiseContent()}
          </div>
    );
  }
};


export const getServerSideProps = async ({ locale } : {locale: string}) =>  {
  return {
    props: {
      ...(await serverSideTranslations(locale ?? 'en', [
        'header',
        'footer'
          ]
      )),
    },
  }
}
export default Page;