Different namespace for each page

[jashwant]

I have a page my-page/sub-page/example.

I want to load a common.json file + another file which has translations of this page only.

My getStaticProps looks like this,

export const getStaticProps: GetStaticProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'my-page/sub-page/example'])),
    },
  };
};

And I am using it like this.

const { t } = useTranslation('my-page/sub-page/example');

This throws error
Error: ReactDOMServer does not yet support Suspense

If I remove useSuspense,

const { t } = useTranslation('page/sub-page/sub-page-2/example', { useSuspense: false });

Error is fixed, but it does not translate and shows translate key as fallback.

How do I keep a different translation file for each page ?

[isaachinman]

Please post on StackOverflow for help. Good luck!